我试图将两个图像（一个是 gif）混合在一起，并且仅在显示前景图像的位置显示背景图像。示例：如果前景图像是“T”，背景图像是紫色“X”，我希望看到我尝试过使用背景混合模式，但这没有任何改变。一些类似于我的代码，产生了我不想实现的结果：img { background-image: url("https://content.mycutegraphics.com/graphics/alphabet/purple-alphabet-letter-x.png"); background-blend-mode: multiply; background-repeat: no-repeat; background-size: 100px auto; width: 100px;}<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Soccerball_mask_transparent_background.svg/760px-Soccerball_mask_transparent_background.svg.png" />
1 回答
收到一只叮咚
TA贡献1821条经验 获得超4个赞
这里需要使用 mask：
img {
-webkit-mask-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");
mask-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");
-webkit-mask-size: 100% auto;
mask-size: 100% auto;
width: 100px;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Soccerball_mask_transparent_background.svg/760px-Soccerball_mask_transparent_background.svg.png" />
您还可以考虑使用额外的容器来保持混合效果：
img {
-webkit-mask-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");
mask-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");
-webkit-mask-size: 100% auto;
mask-size: 100% auto;
mix-blend-mode: multiply;
width: 100px;
display:block;
}
.box {
background-image: url("https://i.ibb.co/0DpJxc4/purple-alphabet-letter-x.png");
background-size:100% auto;
display:inline-block;
}
<div class="box"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Soccerball_mask_transparent_background.svg/760px-Soccerball_mask_transparent_background.svg.png" />
</div>
- 1 回答
- 0 关注
- 47 浏览
添加回答
举报
0/150
提交
取消