0

これはhtmlです

<div id="tab-1">

</div>

彼女はCSSです

#tab-1:before{
    background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;
    content: "";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;

}

デモ

背景画像を表示するには? background-color を使用すると機能しますが、なぜ background-image を使用しないのですか? また、jsfiddle では動作するが、私のローカルホストでは動作しない場合もあります。

4

5 に答える 5

2

プロパティ内で無効な短縮構文を使用しているため、no-repeatからを取り出す必要があります。短縮構文を使用するには、代わりにプロパティを使用する必要があります。background-imagebackground-imagebackground

#tab-1:before{
    background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw");
    background-repeat: no-repeat;
    content: " ";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;
}

デモ（background-repeat残したい場合は切り離すbackground-image）

デモ 2background (プロパティを使用した CSS 短縮構文

于 2013-07-30T05:48:59.927 に答える
0

を分離するno-repeat

#tab-1:before{
    background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;
}

フィドル: http://jsfiddle.net/6nDKP/1/

于 2013-07-30T05:48:23.893 に答える
0

機能しない理由は、背景画像スタイルに繰り返しなしが含まれているためです。に除外しbackground-repeat: no-repeat;ます。その後、それはうまくいきます。コードは次のとおりです。

#tab-1:before{
    background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw");
    background-repeat: no-repeat;
    content: "";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;

}
于 2013-07-30T05:51:01.570 に答える
0

背景画像を背景付きで変更します。

#tab-1:before{
    background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;
    content: "";
    display: block;
    height: 100px;
    position: relative;
    top: 8px;
    width: 500px;

}

デモ: http://jsfiddle.net/zyuWW/

于 2013-07-30T05:51:16.730 に答える