0

私は css の初心者で、ページ上部の背景画像にグラデーションを追加する必要があります。これが私が試したものですが、明らかに値を上書きするバックグラウンドとして機能していません。どうすれば修正できますか

背景画像があり、その上にグラデーションが必要です。ここに私のcssがあります

body.test {
    /* Mozilla: */
    background: -moz-linear-gradient(top, #00FF00, #000000);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
    left top, left bottom, from(#00FF00), to(#000000));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
        StartColorStr='#00FF00', EndColorStr='#000000', GradientType=0);
background: url(../mybackground.png);
}

ここでテスト http://jsfiddle.net/PsDuF/

4

2 に答える 2

1

まず、CSS グラデーションを作成するためのこのツールを見てください。

于 2012-08-09T22:14:23.173 に答える
0

変化する

background: url(../mybackground.png);

に

background-image:  url(../mybackground.png);

backgroundは省略構文です。または、画像を他の構文と組み合わせることができます。

background:  url(../mybackground.png), -moz-linear-gradient(top, #00FF00, #000000);

あなたの場合、background複数回宣言しているため、宣言するたびに、前の宣言をオーバーライドしています。

1回の宣言で複数の背景を宣言した場合、宣言した順番によって重なり順が変わります。画像と mozilla 背景グラデーションを使用した JSBIN の例: jsbin.com/abumuz/1

画像の上にグラデーションが必要であるが、それでも画像を見たい場合は、グラデーションにアルファ透明度があることを確認する必要があることに注意してください。

于 2012-08-09T22:14:14.537 に答える