CSS3是否支持同时使用图像和渐变作为单个<div>？</div>的背景

Question

我知道你可以在CSS3中的单个<div>上做多个背景，但是可以将图像引用背景（即url(...)）与渐变生成背景混合（例如{{1 }}）？

如果是这样，语法是什么？

如果没有，达到相同结果的最佳做法是什么？

感谢。

Answer 1

你可以！

background: -moz-linear-gradient(-45deg, rgba(0,0,255,0), rgba(0,0,255,1)), url("image");

可以在http://software.hixie.ch/utilities/js/live-dom-viewer/saved/675直播。

当然，请注意，CSS渐变仍在不断变化。

Answer 2

我假设你试图有条件地使用支持的渐变，但是否则是图像？

如果是这样，那么一种方法是通过Javascript来做 - 例如：

document.getElementById("whatever").style = "url(...)";

我不确定如何检查浏览器类型，但这应该是一个简单的Google搜索。

---

但是，如果您尝试将图像叠加在渐变上，但是透明（以便显示某些渐变），则可以尝试此处描述的内容：http://www.css3.info/introduction-opacity-rgba/ < / p>

请注意，它使用0.0-1.0表示alpha，而不是0-255。