将 html img 标签转换为 css答案

【问题标题】：Convert html img tag to css将 html img 标签转换为 css
【发布时间】：2011-03-05 18:43:03
【问题描述】：

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

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

我在 css 中尝试了 background:url，它需要文本才能正确显示，id hilight 并且图像会消失

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

【问题讨论】：

不能真正将图像标签转换成css...
img 元素应该是语义标记。如果您以前将它们用于结构标记，现在正在转向使用 CSS：恭喜！
@zzzzBov - 但如果他用 CSS 替换实际的内容图像，那可不是一件好事。
@Charles 所说的。对于实际内容，here 概述了几个巨大的缺点 - 最突出的是，浏览器将不再打印它们。如果您有一百万张实际图片，拥有一百万个img 标签并没有错

标签： html css image

【解决方案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/

【讨论】：

【解决方案2】：

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

css

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

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

【讨论】：

【解决方案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' />

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

【讨论】：

我看不到 JavaScript 标签，更不用说 jQuery 了..？
好吧，如果他实际上是在谈论使用 CSS 将图像“转换”为 div，那么这就是实现它的方法。也许这个问题措辞不好，我的回答应该更清楚。

【解决方案4】：

如果您打算将图像作为文本字段的背景，您总是可以使用 text-indent

.hg-text-rx {
  背景：网址（hg-rx.gif）；
  背景重复：不重复；
  位置：相对；
**文本缩进：-10000px；**
 }

<p>此文字不会显示，但图片会</p>

但是从 seo 的角度来看，关于这种技术的争论存在矛盾

【讨论】：