如何使 css background-blend-mode 与渐变一起使用？答案

【问题标题】：How to make css background-blend-mode work with gradients?如何使 css background-blend-mode 与渐变一起使用？
【发布时间】：2014-11-13 15:52:18
【问题描述】：

我有一个具有多个背景的页面：一个带有渐变，一个带有纹理图案。但是背景混合模式不起作用。 Chrome 似乎只显示渐变层。当我尝试将两个背景图像或背景图像与纯背景颜色混合时，效果很好。但不是渐变。有什么问题吗？

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;}

我的目标是这样的：

【问题讨论】：

标签： css gradient

【解决方案1】：

它确实适用于您只需要使用多个背景的渐变。

您当前代码的问题是您只设置了一个背景。

首先将background 设置为图像：

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

然后你覆盖图像并将background设置为渐变：

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: background1, background2, ..., backgroundN;

使用渐变：

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;
}

类似于您的图像示例的渐变：

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;
}

【讨论】：

现在我明白了。非常感谢！