使用html / css创建剪辑蒙版图像src

Question

我想使用html和css创建图像蒙版。不使用svg或背景图片。

剪辑蒙版需要应用<img src='">。没有背景图片，我无法实现这一目标。

＆＃13;

＆＃13;

.pic-mask {
    position:relative;
}
.pic-mask:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(63, 72, 48, 0.8);
    -moz-transition: background .3s linear;
    -webkit-transition: background .3s linear;
    -ms-transition: background .3s linear;
    -o-transition: background .3s linear;
    transition: background .3s linear;
}

＆＃13;

<div class="pic-mask">
<img src="https://im.ezgif.com/tmp/ezgif-1-1bf1c27255.jpg" width="500">
</div>

＆＃13;

＆＃13;

＆＃13;

我的预期输出如下图

Answer 1

你必须设置图像的动态宽度和高度，尝试这样的事情：

HTML：

<div class="image-container">
 <div class="pic-mask">
  <img src="https://im.ezgif.com/tmp/ezgif-1-1bf1c27255.jpg">
 </div>
</div>

CSS：

.image-container img {
  width:100%;
  height:100%;
}
.pic-mask {
    position:relative;
}
.pic-mask:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(63, 72, 48, 0.8);
    -moz-transition: background .3s linear;
    -webkit-transition: background .3s linear;
    -ms-transition: background .3s linear;
    -o-transition: background .3s linear;
    transition: background .3s linear;
}

如果要限制图片的宽度，可以在图片容器上执行此操作，例如：

.image-container {
  max-width:500px;
}

它的原因是pic-mask对于相对父元素绝对是正确的：0将它从它的相对父元素的右边放到0px但是图片本身被设置为比父元素更小的宽度。