如何使css background-blend-mode与渐变一起使用? [英] How to make css background-blend-mode work with gradients?

问题描述

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

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:

推荐答案

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

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.

首先，将背景设置为图像:

背景:url('../images/noisy.png');

然后您覆盖图像并将背景设置为渐变:

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

背景:径向渐变(中心为椭圆，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;

使用渐变:

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

这篇关于如何使css background-blend-mode与渐变一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！