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

【问题标题】：How can I replace an image using only a CSS Stylesheet如何仅使用 CSS 样式表替换图像
【发布时间】：2012-10-18 07:15:44
【问题描述】：

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

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

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

.rmLeftImage{

visibility: hidden;
}

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

【问题讨论】：

html元素是不是？
查看 ::before 伪元素并将新图像设置为该 ::before 元素的背景图像。您可能需要取消隐藏的可见性，这在旧浏览器中不起作用
是的，这是一个抱歉，不知道为什么代码没有发布。 html 如下所示：

标签： html css inline

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

继续隐藏图片

可见性：隐藏；

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

更改背景图像

背景：url('urltoyourimage')

【讨论】：

【解决方案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/，仅用于演示目的。

【讨论】：