本文介绍了CSS多重渐变的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在CSS中设置一个元素的背景样式,如下所示:
I want to style background of one element in CSS, something like this:
- 从上到下的颜色渐变,没有任何透明度,
- 从左到右具有单一颜色的透明度渐变:左右不透明,中间透明度为100%
- 第二个梯度应该在比第一个更高的层上.两者都放置在元素面积的100%
代码:
div.panel div.panel-heading
{
background: linear-gradient(to bottom, #e8e8e8 0%,#dbdbdb 50%,#cdcdcd 51%,#e0e0e0 100%),
/* Here I want have got second gradient, with transparency, on higher layer */;
}
这可能吗?
推荐答案
通过:after
和:before
可以实现:
.gradient{
height:400px;
background: #61fc32;
background: -moz-linear-gradient(left, #61fc32 0%, #f43034 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#61fc32), color-stop(100%,#f43034));
background: -webkit-linear-gradient(left, #61fc32 0%,#f43034 100%);
background: -o-linear-gradient(left, #61fc32 0%,#f43034 100%);
background: -ms-linear-gradient(left, #61fc32 0%,#f43034 100%);
background: linear-gradient(to right, #61fc32 0%,#f43034 100%);
position:relative;
}
.gradient:after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: -moz-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%, rgba(40,51,201,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(40,51,201,0)), color-stop(100%,rgba(40,51,201,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
background: radial-gradient(ellipse at center, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
}
这篇关于CSS多重渐变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!