將html img標記轉換爲css

如何將img標記轉換爲css，因此我不必擁有一百萬個img標記。或最新最好的方式待辦事項圖像與CSS將html img標記轉換爲css

<img src="hg-rx.gif" name="foo" width="18" height="18">

我試圖背景：網址在CSS和它需要的文字才能正常顯示，ID高亮和圖像將消失

.hg-text-rx { 
    background:url(hg-rx.gif); 
    background-repeat: no-repeat; 
    position: relative; 
}

來源

2011-03-04 Mike

不能真正將圖像標籤轉換成css ... – Orbit 2011-03-04 19:55:41

img元素應該是sem推測標記。如果您以前使用它們進行結構標記，現在正在使用CSS：恭喜！ – zzzzBov 2011-03-04 19:58:58

@zzzzBov - 但如果他用CSS代替實際的內容圖像，那麼這不是一件好事。 – 2011-03-04 20:00:29

你可以在css中添加圖像作爲背景，但您必須將圖像的width和height設置爲可見。

CSS

.hg-text-rx {background:url("http://dummyimage.com/200x200/000/545");width:200px;height:200px};

演示：http://jsfiddle.net/2XX8A/

來源

2011-03-04 19:57:49 Sotiris

事實上，雖然這不能被嚴格CSS做，如果你有IMG標籤，並希望將其轉換爲div的，你可以做所以使用jQuery（一個JavaScript包裝）在飛行很容易。

現場演示http://jsfiddle.net/Epgvc/4/

HTML

<img src='http://dummyimage.com/200x200/000/fff&text=image1' /> 
<img src='http://dummyimage.com/100x100/f00/ff0&text=image2' /> 
<img src='http://dummyimage.com/250x50/0ff/fff&text=image3' />

$('img').each(function(){ 
    var html="<div style='border:1px solid #ff0;width:" + $(this).width() + "px;height:" + $(this).height() + "px;background:url(" + $(this).attr('src')+ ");color:#fff;'>This is a Div!</div>" 
    $(html).insertBefore($(this)); 
    $(this).remove(); //Comment out this line if you want to leave the original image 
});

來源

2011-03-04 20:05:29 Dutchie432

我看不到一個JavaScript標籤，更不用說一個jQuery標籤了。 – 2011-03-04 20:10:04

好吧，如果他實際上在談論使用CSS將圖片「轉換」爲div，那麼這就是實現它的方法。也許這個問題很難說，我的答案應該更清楚。 – Dutchie432 2011-03-04 20:12:02

你可以只用一個div或固定其他塊元素的CSS這樣做寬度和高度，並使形象的背景。但要做到這一點，您仍然必須將div（用於圖像）放在HTML中，這樣您纔不會真正清理任何東西，除非您只是試圖使網站更容易使用CSS完全清理。但是，這確實使翻轉狀態變得輕而易舉。

div#hg-rx { 
display:block; 
width:18px; 
height:18px; 
background: url(hg-rx.gif) 0 0 no-repeat transparent; 
} 

<div id="hg-rx"></div>

如果你正在做邊界，圓角或按鈕，你可能想看看精靈。 http://css-tricks.com/css-sprites/

來源

2011-03-04 20:08:53 mahalie

如果你一心想不必你可以送花兒給人使用文本縮進

.hg-text-rx { 
    background:url(hg-rx.gif); 
    background-repeat: no-repeat; 
    position: relative; 
**text-indent:-10000px;** 
}

<p>本文不會顯示文本字段中的圖像作爲背景，但圖像</p>

然而從seo的角度來看，這種技術存在矛盾的觀點

來源

2011-03-05 10:43:03 atmd

將html img標記轉換爲css

回答

相關問題