如何仅通过CSS替换<img>标签图片？无法修改HTML和JS

仅用CSS替换标签图片的可行方案 #

当然可以，以下是几种无需修改HTML/JS的有效方法，解决你之前尝试遇到的问题：

方法1：伪元素+visibility属性覆盖 #

替换元素（如<img>）本身不支持::before，但可以用::after结合定位和visibility隐藏原图片并显示新图：

img {
  visibility: hidden; /* 隐藏原图片但保留占位空间 */
  position: relative;
  width: 200px; /* 匹配目标图片的尺寸 */
  height: 150px;
}

img::after {
  content: url('你的新图片地址');
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
}

• 不用display: none是因为它会让伪元素也失效，visibility: hidden仅隐藏原内容，不影响伪元素的渲染。

方法2：背景图+clip-path裁剪隐藏原图片 #

通过clip-path把原图片裁剪成不可见区域，同时设置背景图覆盖：

img {
  background-image: url('你的新图片地址');
  background-size: 100% 100%; /* 自适应原img的尺寸 */
  clip-path: polygon(0 0, 0 0, 0 0, 0 0); /* 裁剪出完全不可见的区域 */
}

这个方法不需要手动设置宽高，会自动继承原<img>的尺寸。

方法3：背景图+文本缩进移出原图片 #

适合需要保留原img尺寸的场景：

img {
  background-image: url('你的新图片地址');
  background-size: cover;
  background-position: center;
  text-indent: -9999px; /* 把原图片内容移出可视区域 */
  line-height: 0; /* 消除默认行高带来的留白 */
}

为什么你之前的尝试无效？ #

• opacity: 0只是让原图片透明，但它仍处于最上层，会遮挡背景图。
• <img>是替换元素，主流浏览器不支持::before伪元素，只有图片加载失败时才可能生效。
• 单独用background-image时，原图片会显示在背景图上方，必须先隐藏原图片内容才能让背景图显现。

内容的提问来源于stack exchange，提问作者Theo Toke