具有渐变叠加的CSS3背景 - 渐变仅在Firefox中工作

Question

我正在尝试在背景图像上叠加CSS渐变.我已经在Firefox中工作,但在safari和chrome中我只获得背景图像,没有渐变.

(我使用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 */

Answer 1

在这种情况下,我建议使用速记符号,这将使其更容易阅读和维护(并解决了问题).这是一个工作示例(和演示: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;
}