Question

如何将img标记转换为css，这样我就不必拥有一百万个img标记。或者最好的方式用css

来制作图像

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

我在css中尝试了背景：url，它需要文本才能正常显示，id hilight，图像会消失

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

Answer 1

你可以通过使用固定宽度和高度的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/

Answer 2

您可以在css中添加图片作为背景，但必须将图片的width和height设置为可见。

<强> CSS

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

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

Answer 3

实际上，虽然这不能在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' />

<强> JS

$('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 });

Answer 4

如果您打算将图像作为文本字段的背景，您可以使用文本缩进

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

<p>此文字无法显示，但图片将</p>

然而，从seo的角度来看，关于这种技术存在相互矛盾的争论

将html img标签转换为css

4 个答案: