叠加在没有背景的图像上

Question

我怎样才能实现下图中的效果。 我有一张图片，我想在图片上添加颜色叠加层，但仅限于图像形状。

我试图做一些事情，但我在所有包含图像的 div 上实现了叠加......如下图所示：

Answer 1

这是一个使用蒙版的想法，其中的诀窍是考虑与蒙版层相同的图像，并且叠加层将按照图像形状进行切割

 .box { background:#fff; position:relative; width:200px; display:inline-block; -webkit-mask:url(https://i.ibb.co/2ngRVZQ/Daco-2761771.png) center/contain no-repeat; } img { display:block; max-width:100%; }.box:before { content:""; position:absolute; left:0; right:0; top:0; height:50%; /* adjust this */ background:rgba(255,0,0,0.5); } body { background:#f2f2f2; }

 <div class="box"> <img src="https://i.ibb.co/2ngRVZQ/Daco-2761771.png"> </div> <div class="box" style="width:100px;"> <img src="https://i.ibb.co/2ngRVZQ/Daco-2761771.png"> </div>

您还可以像下面这样优化：

 .box { --img: url(https://i.ibb.co/2ngRVZQ/Daco-2761771.png); background: #fff; position: relative; width: 200px; display: inline-block; background: var(--img) center/contain no-repeat; -webkit-mask: var(--img) center/contain no-repeat; } img { display: block; max-width: 100%; }.box:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--h,50%); /* adjust this */ background: var(--c, rgba(255, 0, 0, 0.5)); }.box:after { content: ""; display: block; padding-top: 150%; /*maintain the same ratio (adjust based on your real image) */ } body { background: #f2f2f2; }

 <div class="box"></div> <div class="box" style="width:100px;--c:rgba(0,255,0,0.5);--img:url(https://i.ibb.co/3NVCq38/Daco-1325460.png);--h:70%"></div>