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

我想在页面上显示图像,但我不想硬编码html中图像的引用。 有可能做这样的事情: HTML:
<span id="got-easier"></span>
CSS:
#got-easier { image: url(/i/trend-down.gif); }
(应支持IE6)     
已邀请:
是的,使用背景图片:)
#got-easier { background-image: url(/i/trend-down.gif); }
如果使用,请记住将跨度设置为
display: block;
并设置图像的宽度/高度。 正如David Dorward指出的那样,如果它是与信息相关的图像,它应该包含在带有
<img>
标签和alt属性的文档中。     
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
}
    
如果你想以内联方式显示图像,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的帮助时,这可能很有用。     

要回复问题请先登录注册