3

タグにCSS を適用するbackgroundと、色は機能しますが、表示されません。divbackground-image

を div の下部に繰り返し表示したいのですが、 、、またはなしでbackground-imageのみ適用しても表示されません。白のみ表示されます。background-image: url('assets/shadow.png');positionrepeatbackground-color

しかし、WILL を適用するbackground-color: #ECECFB;とbackground-color、バックグラウンドで正しく表示されます。

なぜ機能しないbackground-imageのですか？

CSS

#slider-container,#footer-container,#main aside {
    background-color: #ECECFB;
    background-image: url('assets/shadow.png');
    background-repeat: repeat-x;
    background-position: bottom;
}

画像は正しくリンクされています。画像は 15 ピクセル x 12 ピクセルです。

省略形の CSS 背景を試してみたところ、色だけが表示されました。

4

3 に答える 3

2

下の私のフィドルを見てください、それがうまくいくことに注意してください。画像がダウンロードされない場合（つまり、URLが正しくない場合）、背景色のみが表示されます。chrome devツールの場所またはネットワークタブをチェックして、背景画像がロードされていないかどうかを確認します（404）。

<div class="foo"></div>
.foo {
 background-color: red;
 background-image: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
 background-repeat: repeat-x;
 background-position: bottom;
 height: 500px;
 width: 500px;   
}​

http://jsfiddle.net/rlemon/XCbK4/

于 2012-12-20T15:23:23.093 に答える
0

このbackgroundプロパティを使用して画像を表示することもできます。

構文

background: color position size repeat origin clip attachment image;

同時に使用するbackgroundと、競合が発生する場合があります。何らかの理由でbackground-image使用の動作が異なるか、使用する順序が重要であると思います。background-color

もちろん、これにより、画像の代わりに色も表示されます。

#slider-container,#footer-container,#main aside {
    background-image: url('assets/shadow.png');
    background: #ECECFB;  // overwriting the image
}​
于 2012-12-20T15:34:25.090 に答える
0

これを試すことができます。私はそれが役立つことを願っています:

#slider-container,#footer-container,#main aside {
background: #ECECFB url('assets/shadow.png') repeat-x bottom
}
于 2012-12-20T23:33:35.010 に答える