疊加在沒有背景的圖像上

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>