HTML和CSS只能创建自动忽略图像上的透明区域的叠加层吗？

发布时间：2020-12-14 22:24:35 所属栏目：资源来源：网络整理

导读：例如，它具有透明背景的图像：而且我想添加一个灰色叠加层(例如，一个div或canvas …)：但是我希望叠加层自动忽略图像上的透明区域：可以纯HTML和CSS(例如，通过div，canvas …)这样做？解决方法尝试覆盖混合模式。或倍增！ (IE或Edge不支持，谢谢@Stil

例如，它具有透明背景的图像：

而且我想添加一个灰色叠加层(例如，一个div或canvas …)：

但是我希望叠加层自动忽略图像上的透明区域：

可以纯HTML和CSS(例如，通过div，canvas …)这样做？

尝试覆盖混合模式。或倍增！
(IE或Edge不支持，谢谢@Stilltorik)

.multiplied {
  background-color: blue;
  width:250px;
  height: 100px;
  margin-top: -100px;
  mix-blend-mode: overlay;
}

<div>
  <img src='https://i.stack.imgur.com/4yUEW.png'/>
  <div class='multiplied'></div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!