CSS背景碰撞答案

【问题标题】：CSS background CollisionCSS背景碰撞
【发布时间】：2011-06-28 17:58:49
【问题描述】：

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 );

我怎样才能使这些背景不相互碰撞？ url 图像不显示 - 或者如果我颠倒顺序渐变不显示...有没有办法将它们组合在同一行以停止碰撞并相互抵消？

谢谢

【问题讨论】：

顺便说一句，您应该使用较新的 -webkit-linear-gradient（与 CSS3 标准和 -moz-linear-gradient 匹配）而不是较旧的 -webkit-gradient。例如，请参阅：colorzilla.com/gradient-editor。

标签： url css background gradient

【解决方案1】：

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

/* 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 );

必须指定相同的图像三次很麻烦，但出于兼容性原因，确实没有办法解决。

见：http://www.w3.org/TR/css3-background/#layering

框的背景可以有 CSS3 中的多层。的数量层数由层数决定逗号分隔的值 background-image 属性。

另见：http://www.w3.org/TR/css3-background/#the-background

【讨论】：

Matt - 要解释为什么三十多点的解决方案有效而您的无效，这是因为每次您声明 background 时，它都会覆盖该元素之前的任何声明。如果您打开 Firebug 并查看元素，您可以看到此行为。
是的，我知道它会覆盖同一类中的前一个 - 我只是不知道如何将两行组合在一起^^

【解决方案2】：

考虑使用此站点来帮助生成 css 渐变 http://www.colorzilla.com/gradient-editor/

这是一个例子http://jsfiddle.net/pxfunc/LG2dU/

请注意，在 Chrome 10 和 Safari 5.1 中，-webkit-gradient 样式已替换为 -webkit-linear-gradient，以兼容 W3C 规范

为了让您的渐变和图像同时显示，您需要在渐变中提供具有一定 alpha 透明度的颜色，例如将渐变颜色之一设置为 transparent 或使用 rgba 或 hsla 格式

CSS：

/* 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%;

【讨论】：