Url CSS背景冲突

如何使这些背景不相互碰撞？url图像不显示-或者如果我颠倒梯度不显示的顺序…有没有一种方法可以将它们组合在同一行中，以防止冲突和相互抵消

---

谢谢

当然可以，只需像这样组合它们：

background:url("../images/header-icon.png") no-repeat 90% 50%;
background: -moz-linear-gradient(top, #FDFDFD 0%, #F8F8F8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDFDFD), color-stop(100%,#F8F8F8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FDFDFD', endColorstr='#F8F8F8',GradientType=0 );

必须三次指定同一个映像是很麻烦的，但是出于兼容性的原因，实在没有办法解决这个问题

见：

长方体的背景可以是 CSS3中的多个层。人数 层由层的数量决定 中以逗号分隔的值

背景图像

属性

---

另请参见：

考虑使用此网站来帮助生成css渐变

这里有一个例子

需要注意的是，Chrome 10和Safari 5.1中的

-webkit gradient

样式已替换为

-webkit linear gradient

，以与W3C规范兼容

为了让渐变和图像都显示出来，您需要在渐变中提供一种具有一定alpha透明度的颜色，例如将其中一种渐变颜色设置为透明，或者使用or格式

CSS:

/* for browsers that don't support CSS3 backgrounds */
background: url("../images/header-icon.png") no-repeat 90% 50%;

/* for Firefox */
background: url("../images/header-icon.png") no-repeat 90% 50%, -moz-linear-gradient(top, #FDFDFD 0%, #F8F8F8 100%);

/* for WebKit */
background: url("../images/header-icon.png") no-repeat 90% 50%, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDFDFD), color-stop(100%,#F8F8F8));

/* for IE */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FDFDFD', endColorstr='#F8F8F8',GradientType=0 );

---

Matt-为了解释为什么thirtydot的解决方案有效而您的解决方案无效，这是因为每次您声明

background

，它都会覆盖该元素以前的任何声明。如果打开Firebug并查看该元素，您可以看到该行为。是的，我知道它覆盖了同一类中的前一行-我只是不知道如何将两行组合在一起^^^^，作为旁白，您应该使用较新的

-webkit linear gradient

（与CSS3标准和

-moz linear gradient

相匹配）而不是较旧的

-webkit gradient

。参见：示例。

/* Default -no gradient- */
background:url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* FF3.6+ */
background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(238,238,238,0.79) 53%, rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(53%,rgba(238,238,238,0.79)), color-stop(100%,rgba(255,255,255,0))),
   url("http://placehold.it/300/f00") no-repeat 90% 50%; 
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(238,238,238,0.79) 53%,rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* Opera11.10+ */
background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(238,238,238,0.79) 53%,rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* IE10+ */
background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(238,238,238,0.79) 53%,rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#00ffffff',GradientType=0 ),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* W3C */
background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(238,238,238,0.79) 53%,rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;