4

我想知道是否可以仅使用样式表替换 html 页面上的图像。我知道这不是常见的做法，但我唯一可以访问的是样式表，他们在 html 中使用了内联样式。我无法编辑 html 文件。

我检查了元素，它看起来像这样：

我正在尝试替换“bullet_ball_glass_green”图像。我可以通过将其添加到样式表来隐藏它：

.rmLeftImage{

visibility: hidden;
}

但是是否可以在不编辑 html 页面的情况下替换图像或在其上添加另一个图像？

4

4 回答 4

0

css 的层次结构比 html 中的样式更高，您可以添加

img.rmLeftImage {
   background-image: url('path to your image');
}
于 2012-10-18T07:24:28.280 回答
0

继续隐藏图像

可见性：隐藏；

因为您希望它保持图像的宽度/高度并使用

背景：url（'urltoyourimage'）

于 2012-10-18T07:25:42.350 回答
0

这可能是一个有点争议的技术，它支持IE8+ 和几乎所有其他浏览器。

.rmLeftImage { 
    content: '';
}

.rmLeftImage:after {
    display: block;
    content: '';
    background: url(../your/new/image);
    width: 220px; /* image width */
    height: 240px; /* image height */
    position: relative;  /* image width */
}
​

有关示例，请参见http://jsfiddle.net/z9QUu/2/ 。到目前为止，我只在 chrome 中测试过它，它似乎可以工作。如果它可以跨浏览器工作，您根本不需要修改 HTML。

有趣的是，我只能在申请时让它工作content: '';，.rmLeftImage这里没有它的 jsfiddle：http: //jsfiddle.net/Mw76h/，仅用于演示目的。

于 2012-10-18T07:28:15.327 回答
0

您可以在图像周围设置 div 的背景图像（并保留隐藏图像的 css）。

.div_class{ 
  background:url('http://yourdomain.com/yourimage.jpg') no-repeat 50% 50%; 
  width:100px;
  height:100px;
}
于 2012-10-18T07:20:17.920 回答