将html img标记转换为css

我如何将和img标签转换为css，这样我就不必有一百万个img标签了。或者用css处理图像的最佳方法是什么

我尝试了css中的背景：url，它需要文本才能正确显示，id亮，图像就会消失

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

---

您可以在css中添加图像作为背景，但必须将图像的

宽度

和

高度

设置为可见

css

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

---

演示：

事实上，虽然这不能严格用CSS来完成，但如果您有

IMG

标记并希望将它们转换为div，则可以使用jQuery（javascript包装器）动态地执行

现场演示

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
});

$（'img'）。每个（函数（）{
var html=“这是一个Div！”
$（html）.insertBefore（$（this））；
$（this）.remove（）；//如果要保留原始图像，请注释掉此行
});

您可以通过使用一个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>

div#hg rx{
显示：块；
宽度：18px；
高度：18px；
背景：url（hg rx.gif）0 0 0无重复透明；
}

如果您正在制作边框、圆角或按钮，您可能希望查看精灵。

---

如果您希望将图像作为文本字段的背景，则可以始终使用文本缩进

.hg-text-rx { background:url(hg-rx.gif); background-repeat: no-repeat; position: relative; **text-indent:-10000px;** } .hg文本接收{ 背景：url（hg rx.gif）； 背景重复：无重复； 位置：相对位置； **文本缩进：-10000px** }

此文本不会显示，但图像将

---

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

不能真正将图像标记转换为css…

img

元素应该是语义标记。如果您以前将它们用于结构化标记，现在正在使用CSS：祝贺您@ZZZBOV-但如果他用CSS替换实际的内容图像，那么这不是一件好事。@Charles说的。对于实际内容，这有几个巨大的缺点——最显著的是，浏览器不再打印它们。如果你有一百万个实际图像，那么拥有一百万个

img

标记没有什么错。我看不到JavaScript标记，更不用说jQuery标记了。好吧，如果他说的是使用CSS将图像“转换”为div，那么这就是方法。也许这个问题措词不当，我的回答应该更清楚一些。