currently I am not able to blend a PNG Image with a CSS-rendered Gradient. The Code looks like this:
background: linear-gradient(to right, red , blue), url(img/water.png);
background-blend-mode: overlay;
The Blend Mode is not applied when using a Gradient (and the most recent Chrome Canary Build which does support the background-blend-mode). It is however applied when using a plain Color as background, such as rgb(38, 38, 219) url(img/water.png)
Is this a limitation of the CSS Background-Blend-Mode Specification or am I doing something wrong?
All I want to do is to overlay a PNG over a Gradient, creating an effect that I can't achieve by e.g. having the PNG have lesser opacity or colorizing the PNG to begin with.
background-blend-mode , for blending an element's background images, gradients, and background colors. mix-blend-mode , for blending elements over other elements, and lastly. isolation , a lesser used property used with mix-blend-mode for keeping elements from mixing together.
The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.
it should be fine... maybe try to add the image first, then gradient: background: url(img/water.png), linear-gradient(to right, red , blue);
see the example:
.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;
}
edit: also have a look here: http://css-tricks.com/basics-css-blend-modes/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With