我試圖將兩個圖像（一個是 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條經驗 獲得超5個贊
這里需要使用 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 關注
- 118 瀏覽
添加回答
舉報
0/150
提交
取消