浮動的背景圖像

我有<div>與background-image css規則。
的Html浮動的背景圖像

<div class="myclass">Hello world</div>

CSS

.myclass 
{ 
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif'); 
    background-repeat: no-repeat; 
    background-position:left; 
    border: 1px red dotted; 
}

JSFiddle DEMO

我怎樣才能讓裏面的div背景圖像浮於文字？

P.S：我水溼創建另一個div（或另一個元件）的currrent div

來源

2013-09-24 Ilya

http://jsfiddle.net/zqeTx/2/ – Morpheus

使用'TEXT-INDENT：20px'或'填充左：20px'。 –

檢查此[小提琴]（http://jsfiddle.net/venkateshwar/zqeTx/8/）.. –

內添加填充到div到文本偏移。

.myclass 
{ 
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif'); 
    background-repeat: no-repeat; 
    background-position:left; 
    border: 1px red dotted; 
    padding-left: 20px; 
}

JS小提琴：http://jsfiddle.net/zqeTx/1/

來源

2013-09-24 08:49:42

實際上，這並不會將圖片包裹在圖片周圍，而只是在左側添加了一些填充。 – Manticore

此解決方案也適用於IE7，所以我明白了。謝謝！ – Ilya

可以使用::before pseudo element。

jsfiddle Demo

.myclass:before 
{ 
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif'); 
    background-repeat: no-repeat; 
    background-position:left; 
    content: ""; 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
}

這種方法的好處是，如果有一個長文本多行會縮進文本僅在第一線。

Multiple lines jsFiddle Demo

來源

2013-09-24 08:50:44 Itay

這是一個很好的解決方案。想不到另一種實現這一點的方式，但遺憾的是它與IE 9以下版本不兼容。 – Manticore

@manticore我更新了我的答案，使用'：before'而不是':: before'。這在IE8 +上得到支持。 – Itay

我想你沒有想到'text-indent' :) –

使用這個CSS DEMO HERE

.myclass 
{ 
    border: 1px red dotted; 
} 
.myclass:before 
{ 
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif'); 
    background-repeat: no-repeat; 
    background-position:left; 
    padding-left:20px; 
    content:''; 
}

來源

2013-09-24 08:57:19

添加text-indent CSS屬性和引腳還背景圖像頂部，這樣，如果文雲二線，背景不會移動。

.myclass { 
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif'); 
    background-repeat: no-repeat; 
    background-position:2px 2px; 
    border: 1px red dotted; 
    text-indent:20px; 
}

Working Fiddle

來源

2013-09-24 09:31:58

浮動的背景圖像

回答

相關問題