html - 多个 CSS 背景渐变

Question

我想在一个 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 );

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

有什么想法吗？

谢谢!

Answer 1

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

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