Question

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

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

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

.rmLeftImage{

visibility: hidden;
}

但是可以替换图像或在其上添加另一个图像而无需编辑html页面吗？

Answer 1

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

.div_class{ 
  background:url('http://yourdomain.com/yourimage.jpg') no-repeat 50% 50%; 
  width:100px;
  height:100px;
}

Answer 2

css的层次结构高于html中的样式，你可以添加

img.rmLeftImage {
   background-image: url('path to your image');
}

Answer 3

使用

保持隐藏图像

能见度：隐藏;

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

更改背景图像

背景：网址（ 'urltoyourimage'）

Answer 4

这可能是一种略有争议的技术，支持IE8+ and pretty much every other browser。

.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/，仅用于演示目的。

如何仅使用CSS样式表替换图像

4 个答案: