html - 将 html img 标签转换为 css

Question

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

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

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

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

Answer 1

您可以通过使用 div 或其他固定宽度和高度的 block 元素来仅使用 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>

如果您正在制作边框、圆 Angular 或按钮，您可能需要查看 sprite。 http://css-tricks.com/css-sprites/