是否可以为单个背景提供线性和径向渐变？

Question

我想给单个控件提供线性和径向渐变。是否可以将这两者结合起来。？

Answer 1

我将enjoycss用于组合渐变和其他复杂的css内容

它会自动生成CSS，

你只是玩控件，就像在photoshop中一样

http://enjoycss.com/6y/2#background

这里是生成的代码

background: -webkit-linear-gradient( -225deg, rgba(180,180,180,0.2) 0, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.8) 100%), -webkit-radial-gradient( ellipse closest-side, rgba(255,183,107,1) 0, rgba(255,167,61,1) 38%, rgba(255,124,0,1) 65%, rgba(255,127,4,1) 100%);
background: -moz-linear-gradient( 315deg, rgba(180,180,180,0.2) 0, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.8) 100%), -moz-radial-gradient( ellipse closest-side, rgba(255,183,107,1) 0, rgba(255,167,61,1) 38%, rgba(255,124,0,1) 65%, rgba(255,127,4,1) 100%);
background: linear-gradient( 315deg, rgba(180,180,180,0.2) 0, rgba(255,255,255,0.2) 51%, rgba(255,255,255,0.4) 51%, rgba(255,255,255,0.8) 100%), radial-gradient( ellipse closest-side, rgba(255,183,107,1) 0, rgba(255,167,61,1) 38%, rgba(255,124,0,1) 65%, rgba(255,127,4,1) 100%);

Answer 2

是的，可以将线性和径向渐变放在单个背景中。

诀窍是减少这些渐变的不透明度！如果它们是不透明的，则肯定不会看到它们，因为它上面的渐变会阻塞视图，因为图像和渐变会彼此叠加。

图像下多个渐变（线性+径向）的代码示例：

background: url('images/picture.png') no-repeat,linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.3)),radial-gradient(rgb(221, 221, 221), rgb(78, 78, 78));

在上面的示例中，图像堆叠在顶部，然后是图像层下面的线性渐变，而径向渐变是最低层。

请注意，线性渐变图层并非完全不透明，因为如果它是不透明的，则不会显示其下方的图层（在这种情况下为径向渐变）。

Answer 3

您不能在同一元素上放置两个渐变。但是如果你使用css渐变，浏览器必须兼容css3。您可以使用：before和：after伪类来使用两个不同的css选择器。

试试这个：

div {
    position: relative;
    width: 500px;
    height: 500px;
    background: -webkit-gradient(linear, 0 0, 0 500, from(rgba(220,30,50,1)), to(rgba(10,150,20,1)));
}
div:after {
    content : ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    background: -webkit-gradient(radial, center center, 0, center center, 400, from(rgba(65,100,220,.5)), to(rgba(240,200,90,.5)));
}

编辑：
多个背景是IE 9+
并且在伪元素之后是IE 8 +

Answer 4

-webkit适用于Safari和Chrome。你需要使用-moz for firefox。这是一个很酷的发电机来帮忙。 http://westciv.com/tools/gradients/index-moz.html