CSS3 是否支持对单个 <div> 的背景同时使用图像和渐变？答案

【问题标题】：Does CSS3 support using both an image and a gradient for the background of a single <div>?CSS3 是否支持对单个 <div> 的背景同时使用图像和渐变？
【发布时间】：2010-10-23 16:43:18
【问题描述】：

我知道您可以在 CSS3 中对单个 <div> 制作多个背景，但是否可以将图像引用背景（即 url(...)）与渐变生成背景（例如 -moz-linear-gradient(...)）混合？

如果有，语法是什么？

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

谢谢。

【问题讨论】：

标签： css gradient

【解决方案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 渐变仍在不断变化。

【讨论】：

优秀。非常感谢。改变生活的可能性。

【解决方案2】：

我假设您尝试在支持的情况下有条件地使用渐变，但在其他情况下使用图像？

如果是这样，那么一种方法是通过 Javascript 来实现——例如：

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

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

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

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

【讨论】：