圖像移動到正確的CSS

我很新的Web開發，我有這樣的代碼：圖像移動到正確的CSS

<style type="text/css"> 
    span { 
     background:red; 
     background: transparent url(../images/skin/exception.png) 0.4em 100% no-repeat; 
    } 
</style> 
<span> 
    Contents. 
</span>

我得到的輸出，但圖像被放置在Contents文本。我試過：

background-position: 25px;

但是，這是使圖像消失！但我一直在尋找的是：

Contents . . . . . . . . . . . . . my_image

（請注意，在上面.的空間）

如果我做了錯誤？

在此先感謝。

來源

2012-10-09 sriram

'背景位置：中心權利;' – Zeta

@Zeta：我已經編輯我的問題！ – sriram

''不包含塊。添加'display：block'。 – Zeta

請記住，<span>是一個內聯元素，它不是用於希望以塊方式顯示的項目的正確標記。爲此，您應該使用<div>。話雖如此，您可以使用text-indent: 25px;將文字移至右側。或者，您可以使用left: 25px;將新的<div>移動到右側。請記住left會告訴它你想放置它離左邊界有多遠。然後，你可以放在其他<div>文：

<style type="text/css"> 
div { 
    display:inline-block; 
} 
div.image { 
    background:red; 
    background:transparent url(../images/skin/exception.png) 0.4em 100% no-repeat; 
    left:25px; 
} 
</style> 
<div class="box"> 
    Contents. 
    <div class="image"></div> 
</div>

來源

2012-10-09 07:45:35 L0j1k

在FF div.image「消失」，並在IE瀏覽器被置於內容... – Cirou

它看起來像（從他的原始代碼），他想將背景圖像合併到錯誤的顯示（注意背景顏色的紅色和透明度）。 – L0j1k

如果你不需要，你的形象是一個background-image你可以應用此：

CSS：

<style> 

div#box{ 
    width: 100%; 
} 

img#image { 
    float: right; 
} 

</style>

HTML：

<div id="box"> 
    <span id="content"> 
     Contents. 
    </span> 
    <img src="bkg.jpg" alt="Image not available"> 
</div>

來源

2012-10-09 08:09:13 Cirou

圖像不需要放在div中 - 只需將id添加到'img'標籤即可獲得相同的效果。 – whostolemyhat

是的，我知道......我也可以使用span而不是'div'，所以我不需要'display：inline'屬性。這只是一個例子，要知道它是否是海報的好解決方案 – Cirou

我也同意@L0j1k跨度是內聯級別元素。爲什麼要將一些內容放在一個範圍內，然後在該範圍內應用背景圖像。不管怎麼說請檢查的jsfiddle鏈接

DEMO

http://jsfiddle.net/saorabhkr/BvMyg/

來源

2012-10-09 08:38:42 Soarabh

內聯： -

<span> 
//content 
<img src="images/skin/exception.png" style="float:right"> 
</span>

來源

2012-10-09 09:38:34 suiz

圖像移動到正確的CSS

回答

相關問題