如何在css中裁剪图像和覆盖具有透明度的图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (43)

我正在尝试彩色叠加图像,就是裁剪透明的PNG,有点像Photoshop的颜色叠加和不透明度控制。

我的代码:https://jsfiddle.net/j2e83gxq/9/

<div class="imgoverlay"></div>
<style>
.imgoverlay {
  width:500px;
  padding-top:500px;
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/6/66/Android_robot.png");
  background-repeat:no-repeat;
  background-size:contain;
  background-color:cyan;
  background-blend-mode: overlay;
}

我所能找到的是使用背景颜色,但这个颜色是整个元素,我只需要它覆盖一个图像。

因此,我试着把这张图片涂上颜色:https://upload.wikimedia.org/wikipedia/commons/6/66/Android_robot.png

用不同的颜色。

提问于
用户回答回答于

在CSS中无法实现这种效果,最好的方法是使用Photoshop。

扫码关注云+社区

领取腾讯云代金券