3

背景画像に 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 */
4

3 に答える 3

7

この場合、簡略表記を使用することをお勧めします。これにより、読みやすく、維持しやすくなります (そして、問題が修正されます)。これが実際の例です（およびデモ：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-17T23:50:03.137 に答える
1

画像はWebKit のグラデーションの背後にあります。WebKit コードが別の色 を使用しているだけですrgba(0,0,0,0.16)。これは、他のブラウザーで使用されているrgba(99,130,169,0.7).

于 2012-09-18T12:46:22.967 に答える
0

ここでの問題は、CSS の順序にある​​と思います。 代わりに、Chris Coyier のアプローチを試してください。

.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-17T23:40:27.697 に答える