如何在多个背景中使用供应商属性？答案

【问题标题】：How to use Vendor Properties in Multiple Backgrounds?如何在多个背景中使用供应商属性？
【发布时间】：2011-02-04 11:16:10
【问题描述】：

我想在 css 中使用多个背景，目前支持 Firefox 3.61、Chrome/Safari，据说是 Opera10.5（不在 gnu/linux 上运行）。它工作正常，但是我想使用线性渐变作为背景。它适用于 Firefox，完全不适用于 Chrome，但我不知道如何使其同时适用于两个。任何线索？ http://snook.ca/archives/html_and_css/multiple-bg-css-gradients 最接近我需要的东西，但我还不能让它与 chrome 一起使用。

【问题讨论】：

标签： css linear-gradients multiple-browsers

【解决方案1】：

我不是很肯定，但我的猜测是 chrome 还不支持它。尽管一个元素上的多个背景图像和 css 渐变听起来确实不错，但我仍然建议使用多个元素，每个元素都有一个背景图像。出于某种原因，仍然有人使用根本不支持 CSS3 的 IE。

【讨论】：

【解决方案2】：

这对我有用。似乎将 mozilla 放在 webkit 之后会使 webkit 承认背景图像的第二个参数的存在并取消设置其旧声明。所以我将 -moz 声明放在 -webkit 之前。

背景图像：url（“../images/block_stripe_bg.png”）； /* 对于旧版浏览器 */ 背景图像：url（“../images/block_stripe_bg.png”），-moz-linear-gradient（中心顶部，白色，#dddddd）； /* 适用于 mozilla，被其他浏览器忽略 */ 背景图像：url（“../images/block_stripe_bg.png”），-webkit-gradient（线性，中心顶部，中心底部，从（白色），到（#dddddd））； /* 适用于 webkit，被其他浏览器忽略 */ 背景重复：重复； /* 旧浏览器 */ 背景重复：重复，不重复； /* 较新的浏览器应该将此应用于两个背景*/

【讨论】：