目前我无法将PNG图像与CSS渲染的渐变混合。
代码如下:
background: linear-gradient(to right, red , blue), url(img/water.png);
background-blend-mode: overlay;
使用渐变时,混合模式不会被应用(即使是支持background-blend-mode的最新Chrome Canary Build)。但当使用普通颜色作为背景时,如
rgb(38, 38, 219) url(img/water.png)
,混合模式会被应用。这是CSS Background-Blend-Mode规范的限制还是我做错了什么?
我想要做的就是在渐变上叠加PNG图像,创造一些效果,而这些效果无法通过让PNG图像具有较低的透明度或对其进行着色来实现。
background-image
CSS 属性的顺序进行定义。因此,请更改background
属性值的顺序。 - Bram Vanroy