0

何百万人もの人々がそれを行うのを見てきましたが、私はそれを機能させることができませんでした.

background: -webkit-linear-gradient(left top, black, #333333 85%, gray), url('/img/helix.png');

順序を逆にして背景画像を試してみましたが、まだ何もありません。

私は一人の人が使用しているのを見ました:

body:before {
content: " ";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
}

しかし、もっと良い方法があるはずです...

更新されたコード:

画像 div の ID:

height: 100%;
width: 100%;
background: transparent url('/img/helix-white.png') no-repeat;

body 要素の CSS では、次のようになります。

background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
background: -moz-linear-gradient(left top, black, #333333 85%, gray);
background: -ms-linear-gradient(left top, black, #333333 85%, gray);
background: -o-linear-gradient(left top, black, #333333 85%, gray);
background: linear-gradient(left top, black, #333333 85%, gray);

更新 2:

配置のために CSS で画像を含む div を使用しました。

<div id="backgroundImage">
    <img src="img/helix-white.png" alt=" " />
    </div>


#backgroundImage
    {
        position: fixed;
        bottom: 10%;
        left: 7%;

        opacity:0.4;
        filter:alpha(opacity=40);

        -webkit-transform: rotateZ(20deg);
        -moz-transform: rotateZ(20deg);
        -ms-transform: rotateZ(20deg);
        -o-transform: rotateZ(20deg);
        transform: rotateZ(20deg);
    }

そして、グラデーションの本体 CSS で:

height: 100%;

background: -webkit-linear-gradient(left top, black, #333333 85%, gray);
background: -moz-linear-gradient(left top, black, #333333 85%, gray);
background: -ms-linear-gradient(left top, black, #333333 85%, gray);
background: -o-linear-gradient(left top, black, #333333 85%, gray);
background: linear-gradient(left top, black, #333333 85%, gray);
4

2 に答える 2

1

背景のグラデーションを含む div を作成してから、背景画像を含む別の div を内部に作成しないでください。背景画像が透明な .png であるか、div を埋めていない場合は、背景のグラデーションを見ることができます。

例えば

<div id="gradient">
  <div id="image">
    Your content here.
  </div>
</div>

CSS

#gradient {
  background: -webkit-linear-gradient(left top, black, #333333 85%, gray); }

#image {
  background: transparent url('your image here') center center no-repeat; }

別の注意点として、(Webkit だけでなく) すべてのブラウザーをサポートするために、グラデーション オプションの全範囲を使用する必要があります。コードに CSS3 グラデーション ジェネレーターを使用することをお勧めします: http://www.colorzilla.com/gradient-editor/

于 2013-08-05T19:38:17.370 に答える