Question

目前我无法将PNG图像与CSS渲染的渐变混合。守则如下：

background: linear-gradient(to right, red , blue), url(img/water.png);
background-blend-mode: overlay;

使用渐变（以及最新支持背景混合模式的Chrome Canary Build）时，不会应用混合模式。但是，在使用普通颜色作为背景时应用它，例如rgb(38, 38, 219) url(img/water.png)

这是CSS背景混合模式规范的限制还是我做错了什么？

我想要做的就是将PNG覆盖在渐变上，创造出一种我无法通过以下方式实现的效果：使PNG具有较小的不透明度或开始着色PNG。

Answer 1

它应该没问题...也许先尝试添加图像，然后渐变：background: url(img/water.png), linear-gradient(to right, red , blue);

参见示例：

.test {
  display: block;
  width: 700px;
  height: 438px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;

background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
  -webkit-linear-gradient(left, red, blue);
background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
  -moz-linear-gradient(left, red, blue);
background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
  -o-linear-gradient(left, red, blue);
background-image: url(http://www.sexyli.com/wp-content/uploads/2013/05/Green-Snake-Image-Wallpaper.jpg),
  linear-gradient(to right, red, blue);
  background-blend-mode: overlay;
  }

编辑：还可以看一下：http://css-tricks.com/basics-css-blend-modes/

具有渐变和图像的背景混合模式

1 个答案: