叠加在没有背景的图像上

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>

叠加在没有背景的图像上

overlay on image without background

html

css

background

position