我如何使用CSS3梯度作为我的背景色',然后应用
背景-图像'来应用某种浅色透明纹理?
多种背景!
body {
background: #eb01a5;
background-image: url("IMAGE_URL"); /* fallback */
background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}
这两行是任何不做渐变的浏览器的后备措施。 请参阅下面关于只在IE < 9中堆叠图像的说明。
最后一行为能够处理的浏览器设置背景图片和梯度。
目前几乎所有的浏览器都支持多个背景图片和css背景。浏览器支持情况见http://caniuse.com/#feat=css-gradients。关于为什么你不需要多个浏览器前缀的好文章,见http://codepen.io/thebabydino/full/pjxVWp/
层栈
应该注意的是,第一个定义的图像将是堆栈中最上面的。在这种情况下,图像是在梯度的上面。
关于背景分层的更多信息,见http://www.w3.org/TR/css3-background/#layering。
仅堆叠图像(声明中没有梯度) 对于IE < 9来说
IE9及以上版本可以用同样的方法堆叠图像。你可以用这个方法为IE9创建一个渐变的图像,尽管我个人不会这样做。不过需要注意的是,当只使用图像时,IE 9会忽略回退声明,不显示任何图像。当包含梯度时,这种情况就不会发生。在这种情况下,要使用一个单一的回退图像,我建议使用Paul Irish'精彩的有条件的HTML元素和你的回退代码。
.lte9 #target{ background-image: url("IMAGE_URL"); }
背景位置、大小等。
其他适用于单个图像的属性也可以用逗号分隔。如果只提供了1个值,它将被应用于所有堆叠的图像,包括梯度。background-size: 40px;
将限制图像和梯度的高度和宽度为40px。然而,使用background-size: 40px, cover;
将使图像变成40px,梯度将覆盖该元素。要只对一个图像应用一个设置,为另一个设置默认。background-position:50%, 0 0;
或者对于支持它的浏览器使用initial
: background-position:50%, initial;
你也可以使用背景速记,但这将删除回退颜色和图像。
body{
background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}
这同样适用于background-position、background-repeat等。
需要认识到的一点是,第一个定义的背景图像在堆栈中是最上面的。最后定义的图像将是最下面的。这意味着,要在一个图像后面有一个背景渐变,你需要。
body {
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
}
你还可以为图片定义背景位置和背景尺寸。 我整理了一篇博文,介绍了你可以用CSS3梯度做的一些有趣的事情。
我正试图做同样的事情。虽然背景颜色和背景图像存在于一个对象的不同层中--这意味着它们可以共存--但CSS渐变似乎共同占用了背景图像层。
据我所知,border-image似乎比多重背景有更广泛的支持,所以这也许是一种替代方法。
http://articles.sitepoint.com/article/css3-border-images
更新:又做了一点研究。似乎Petra Gregorova在这里有一些工作 --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html