How to make css background-blend-mode work with gradients?

问题

I have a page with multiple backgrounds: one with gradient and one with texture pattern. But background-blend-mode doesn't work. Chrome appears to show only gradient layer. When I try to blend two background-images or background-image with solid background-color it works well. But not with gradient. Is something wrong?

body {
width: 100%;
height: 100%;
background: url('../images/noisy.png');
background-color: rgba(29, 84, 140, 1);
background: -webkit-radial-gradient(center, ellipse cover, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);
background: radial-gradient(ellipse at center, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);  
background-blend-mode: multiply;}

And my goal is something like that:

回答1:

It does work with gradients you just need to use multiple backgrounds.

The problem with your current code is that you are only setting one background.

First you set background to an image:

background: url('../images/noisy.png');

Then you override the image and set background to a gradient:

background: radial-gradient(ellipse at center, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);

To assign multiple backgrounds you need to comma seperate them:

background: background1, background2, ..., backgroundN;

Using your gradient:

body {
    width: 100%;
    height: 100%;
    background: url('http://i.stack.imgur.com/PEnJm.png');
    background-color: rgba(29, 84, 140, 1);
    /* ^ fallbacks for crappy IE ^ */

    background: url('http://i.stack.imgur.com/PEnJm.png'), -webkit-radial-gradient(center, ellipse cover,     rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);
    background: url('http://i.stack.imgur.com/PEnJm.png'), radial-gradient(ellipse at center, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);  
    background-blend-mode: multiply;
}

A gradient similar to your image example:

body {
    width: 100%;
    height: 100%;
    background: url('http://i.stack.imgur.com/PEnJm.png'), -moz-linear-gradient(left, rgba(21,112,145,1) 0%, rgba(36,138,166,1) 100%);
    background: url('http://i.stack.imgur.com/PEnJm.png'), -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(21,112,145,1)), color-stop(100%,rgba(36,138,166,1)));
    background: url('http://i.stack.imgur.com/PEnJm.png'), -webkit-linear-gradient(left, rgba(21,112,145,1) 0%,rgba(36,138,166,1) 100%);
    background: url('http://i.stack.imgur.com/PEnJm.png'), -o-linear-gradient(left, rgba(21,112,145,1) 0%,rgba(36,138,166,1) 100%);
    background: url('http://i.stack.imgur.com/PEnJm.png'), -ms-linear-gradient(left, rgba(21,112,145,1) 0%,rgba(36,138,166,1) 100%);
    background: url('http://i.stack.imgur.com/PEnJm.png'), linear-gradient(to right, rgba(21,112,145,1) 0%,rgba(36,138,166,1) 100%);
    background-blend-mode: multiply;
}

来源：https://stackoverflow.com/questions/26912911/how-to-make-css-background-blend-mode-work-with-gradients

标签

css

gradient