我想在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 );
我真正需要的是一种混合这些的方法吗?
有什么想法吗?
谢谢!
答案 0 :(得分: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%);
}
答案 1 :(得分:0)
这个怎么样?
background-image: linear-gradient(rgba(173, 8, 24, 0) 0%, rgba(173, 8, 24, 1) 100%);