多个 CSS 背景渐变

Multiple CSS background gradients

我想在 div 的背景上设置多个渐变。

第一个:

background-color: #AD0818;
background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, .1) 50%);

创建两个色调的红色背景。

然后我希望它从左到右淡化为透明,这是在没有两种色调的情况下实现的:

background: -moz-linear-gradient(-45deg, rgba(173,8,24,1) 33%, rgba(173,8,24,0.57) 62%, rgba(255,255,255,0.16) 89%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(33%, rgba(173,8,24,1)), color-stop(62%, rgba(173,8,24,0.57)), color-stop(89%, rgba(255,255,255,0.16)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(-45deg, rgba(173,8,24,1) 33%, rgba(173,8,24,0.57) 62%, rgba(255,255,255,0.16) 89%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(-45deg, rgba(173,8,24,1) 33%, rgba(173,8,24,0.57) 62%, rgba(255,255,255,0.16) 89%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(-45deg, rgba(173,8,24,1) 33%, rgba(173,8,24,0.57) 62%, rgba(255,255,255,0.16) 89%, rgba(255,255,255,0) 100%);
background: linear-gradient(135deg, rgba(173,8,24,1) 33%, rgba(173,8,24,0.57) 62%, rgba(255,255,255,0.16) 89%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad0818', endColorstr='#ffffff', GradientType=1 );

我真正需要的是一种混合这些的方法?

有什么想法吗?

谢谢!

这个怎么样?

background-image: linear-gradient(rgba(173, 8, 24, 0) 0%, rgba(173, 8, 24, 1) 100%);

看到一个example here

您可以添加它们,用逗号分隔:

body {
    background: linear-gradient(transparent 50%, rgba(0, 0, 0, .1) 50%), linear-gradient(135deg, rgba(173,8,24,1) 33%, rgba(173,8,24,0.57) 62%, rgba(255,255,255,0.16) 89%, rgba(255,255,255,0) 100%);
}