带渐变叠加的CSS3背景 - 仅适用于Firefox的渐变

我正试图在背景图像上叠加CSS渐变。我已经在Firefox中使用它，但在safari和chrome中，我只获取背景图片，没有渐变。带渐变叠加的CSS3背景 - 仅适用于Firefox的渐变

（我生成使用http://www.colorzilla.com/gradient-editor/）在每行的末尾梯度代码，然后简单地添加URL（）

更新：看来我的问题可能是WebKit的显示图像背后的梯度，而不是像我需要的顶部，和Firefox。

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0, 0, 0, 0)), color-stop(100%, rgba(99, 130, 169, 0.7))), url(app/bg.jpg) no-repeat center center fixed; /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0,0,0,0.16) 100%), url(app/bg.jpg) no-repeat center center fixed; /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,rgba(99, 130, 169, 0.7) 100%), url(app/bg.jpg) no-repeat center center fixed; /* W3C */

来源

2012-09-17 christian

你有什么要求阻止你使用图像？ – IcedDante

公平的问题，并可能是我最终做的，但我试图只有一个灰度，全屏幕背景图像，然后我可以完全改变使用不同颜色的渐变覆盖的颜色和外观......它是在Firefox中的一个不错的效果... ... – christian

我会建议在这种情况下使用速记符号，它会让你更容易阅读和维护（和它修复该问题）。下面是一个工作示例（和演示：http://jsfiddle.net/joshnh/yyy7V/）：

.foo { 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(99, 130, 169, 0.7))), url('http://lorempixel.com/400/300/'); /* Chrome,Safari4+ */ 
    background-image: -webkit-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('http://lorempixel.com/400/300/'); /* Chrome10+,Safari5.1+ */ 
    background-image: -moz-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('http://lorempixel.com/400/300/'); /* FF3.6+ */ 
    background-image:  -ms-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('http://lorempixel.com/400/300/'); /* IE10+ */ 
    background-image:  -o-linear-gradient(top, transparent, rgba(99,130,169,.7)), url('http://lorempixel.com/400/300/'); /* Opera 11.10+ */ 
    background-image:   linear-gradient(to bottom, transparent, rgba(99,130,169,0.7)), url('http://lorempixel.com/400/300/'); /* W3C */ 

    background-repeat: no-repeat; 
    background-position: 50% 50%; 
    background-attachment: fixed; 
}

来源

2012-09-17 23:50:03 joshnh

感谢您 - 从我坐的地方，这不适用于safari和铬！图像位于渐变的顶部，不在其后面。在Firefox仍然工作。你不一样吗？ – christian

现在使用下面的Ana的更正。谢谢。 – christian

我相信这里的问题来自您的CSS的顺序。 Try Chris Coyier's appraoch instead.

.gradient-bg { 
    background-color: #1a82f7; 
    background-image: url(images/fallback-gradient.png); 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7)); 
    background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
    background-image: -moz-linear-gradient(top, #2F2727, #1a82f7); 
    background-image:  -ms-linear-gradient(top, #2F2727, #1a82f7); 
    background-image:  -o-linear-gradient(top, #2F2727, #1a82f7); 
}

来源

2012-09-17 23:40:27 cereallarceny

谢谢 - 这似乎只显示渐变，而不是它背后的背景图像... – christian

图像0是后面 WebKit中的梯度。只是WebKit代码使用了另一种颜色，rgba(0,0,0,0.16)，其中比其他浏览器使用的要难得多，rgba(99,130,169,0.7)。

来源

2012-09-18 12:46:22 Ana

很棒的地方 - 谢谢 – christian

带渐变叠加的CSS3背景 - 仅适用于Firefox的渐变

回答

相关问题