多个 CSS 背景渐变答案

【问题标题】：Multiple CSS background gradients多个 CSS 背景渐变
【发布时间】：2015-03-06 11:56:10
【问题描述】：

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

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

有什么想法吗？

谢谢！

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/background

标签： html css background gradient

【解决方案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%);
}

【讨论】：

【解决方案2】：

这个怎么样？

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

查看example here

【讨论】：