将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

回答

相关问题