多个 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%);
}
我想在 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%);
}