html - 使用 html/css 创建剪辑蒙版图像 src
问题描述
我想只使用 html 和 css 创建图像掩码。不使用 svg 或背景图片。
剪辑蒙版需要使用<img src='">
. 没有背景图片我无法做到这一点。
.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;
}
<div class="pic-mask">
<img src="https://im.ezgif.com/tmp/ezgif-1-1bf1c27255.jpg" width="500">
</div>
我的预期输出如下图
解决方案
您必须设置图像的动态宽度和高度,尝试如下操作:
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 是相对父元素的绝对值,而 right:0 会将其放在相对父元素右侧 0px 处,但图片本身的宽度设置为小于父元素的宽度。