Question

我想在页面上显示图片，但我不想在html中对图像的引用进行硬编码。

是否可以执行以下操作：

HTML：

<span id="got-easier"></span>

CSS：

#got-easier { image: url(/i/trend-down.gif); }

（应支持IE6）

Answer 1

是的，使用背景图片：）

#got-easier { background-image: url(/i/trend-down.gif); }

请务必将范围设置为display: block;，并在使用时设置图像的宽度/高度。

正如David Dorward所指出的，如果它是与信息相关的图像，它应该包含在带有<img>标记和alt属性的文档中。

Answer 2

Heya，它的常用术语是css图像替换技术（或IR）。以下是目前常用的方法。只需选择两者中的任何一个;）

/* Leahy Langridge Method */
span#imageName {
  display: block;
  height: 0 !important;
  overflow: hidden; 
  padding-top: 0px;  /* height of image  */
  width: 0px;  /* width of image */
  background: url(url/of/image.jpg) no-repeat
}

/* Phark Method */
span#imageName {
  display: block;
  width: 0px; 
  height: 0px; 
  background: url(url/of/image.jpg) no-repeat; 
  text-indent: -9999px
}

Answer 3

如果你想要内联显示图像，position：absolute就可以了：

#got-easier {
  display:inline;
  position:absolute;
  width:img-Xpx;
  height:img-Ypx;
  background:url(/i/trend-down.gif) no-repeat;
}

唯一的问题是，由于图像位置是绝对的，它将覆盖它旁边的任何内容（在IE6中它可能会出现在后面），以及我发现解决这个问题的解决方法（使用CSS和jQuery））IE6不支持。您的图像容器必须后跟新行。

例如，当您想要在表单标题或按钮旁边放置（？）图像（通常在它们旁边没有任何内容）时，这可能很有用，可以显示onmouseover的帮助。

如何仅使用css在html页面上显示图像？

3 个答案: