Как установить фоновое изображение на псевдоэлемент?

это 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; 

}

demo

Как отображать фоновое изображение? Если я использую фоновый цвет, тогда он работает, но почему не фоновое изображение? И даже если иногда работает в jsfiddle, но не в моем локальном хосте.

источник

2013-07-30 Navin Rauniyar

Вы должны вынуть no-repeat из background-image, как вы используете короткий синтаксис для рук внутри background-image имущества, которое не является действительным, Симметричным использовать короткие используйте вместо background имущество

#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; 
}

Demo (Разделительный background-repeat, если вы хотите сохранить background-image) (синтаксис CSS Short руки используя background свойства)

Demo 2

источник

2013-07-30 05:48:59

Спасибо. Но в моем localhost я использовал background: url() no-repeat; но также не работает, так что я тестирую, используя overflow: hidden или clear: both; Есть идеи? –

Должен ли я вынуть no-repeat из фона вместо фонового изображения? –

@NavinRauniyar, если вы хотите использовать короткую руку CSS, вам нужно использовать 'background:', а не background image –

Отделить 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; 
}

Fiddle: http://jsfiddle.net/6nDKP/1/

источник

2013-07-30 05:48:23 doitlikejustin

Причину его не работает в том, что вы приехали в том числе не-повтора в стиле фонового изображения. Исключить его до 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-30 05:51:01 user2618352

Изменить фоновое изображение с фоном.

#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-30 05:51:16

Отъезд: http://jsfiddle.net/6nDKP/4/

Вместо:

background-image: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;

Использование:

background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcQQxJ4VT26y0vXV4ea0BVugIdFEJ3BhnZByh13xvD-LbWPocNCHHw") no-repeat;

источник

2013-07-30 06:00:29

Как установить фоновое изображение на псевдоэлемент?

ответ

Смежные вопросы