CSS 图像遮罩，带有 % 高度的 img

debugcn 发表于 Dev

凯尔麦克布莱德

这是一个挑战，基本上我有一个 CMS，图像的侧面具有透明度，我试图掩盖它们我设法使侧面被掩盖，但底部似乎不起作用。这是 JS 小提琴文件的链接：https : //jsfiddle.net/zqvktews/3/

裁剪图像不是一种选择，我有 400 多个图像...

HTML

<div class="test">
 <img class="inside" src="http://uploads.webflow.com/56f9678288dad33d7bb08de2/58b985d6b807bda0073d7511_255_Fortuna_v.png" alt="">
</div>

的CSS

.test{
 width: 20%;
 background: red;
 overflow: hidden;
 margin:0px 10px 0px 10px;
 display: inline-block;
}

.inside{
 width: calc(100% + 20px);
 position: relative;
 top: -10px;
 left: -10px;
}

曼萨姆先生

稍微改变一下：

删除多余的直列缝隙图像下面有display: block
用 calc 将宽度填充 10px。现在可以以 5px 为增量移动图像
将图像粘贴到底部，用 bottom: -5px
将图像拉回 10 像素的负边距
将图像向左拉动 -5px 边距

像这样：

.inside{
  display: block;
  position: relative;
  width: calc(100% + 10px);
  margin: -10px 0 0 -5px;
  bottom: -5px;
}

给我们：

完整的例子

注意：对于此示例，我重新托管了图像，因此链接不会中断。它们现在是图像周围有白色间隙的 jpg，而不是透明的。

.test {
  width: 20%;
  background: red;
  overflow: hidden;
  margin: 0px 10px 0px 10px;
  display: inline-block;
}

.inside {
  display: block;
  position: relative;
  width: calc(100% + 10px);
  margin: -10px 0 0 -5px;
  bottom: -5px;
}

<div class="test">
  <img class="inside" src="https://i.stack.imgur.com/j0rVY.jpg" alt="">
</div>

<div class="test">
  <img class="inside" src="https://i.stack.imgur.com/j0rVY.jpg" alt="">
</div>

<div class="test">
  <img class="inside" src="https://i.stack.imgur.com/j0rVY.jpg" alt="">
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。