使用css属性替换Image标签的src

Question

有什么方法可以使用任何css技巧替换图像标签的SRC属性中提到的图像？

<img src = "setting-icon.png"></img>

我想用css属性替换setting-icon.png，我能够将另一个图像放在背景中，带有图像标签的background-image属性但是我需要隐藏src中提到的那个并显示我的那个在css中的background-image属性中提到。

是的，这是奇怪的要求，但问题是我在第三方应用程序中进行自定义，我只能控制css，我无法修改HTML标记。

感谢阅读！

Answer 1

您可以使用content:url("image.jpg")

https://developer.mozilla.org/en-US/docs/Web/CSS/content

在你的CSS中，

.img {
    content:url("/new/image/source.png");
}

如果您无法修改HTML，

img {
    content:url("/new/image/source.png");
}

在HTML中，

<img class="img"/>

我还没有尝试过，但我不确定内联属性src是否会超重CSS content。

<强>更新

如果您的img元素已经有src，它应该可以工作。谢谢@pol

Answer 2

您无法使用CSS更改html属性值，只能使用javascript。

但是，使用CSS，您可以“隐藏”图像并将背景放在其位置。

<i>

div img {
  height: 0;
  width: 0;
  padding-top: 175px;
  padding-left: 280px;
  background-image: url("http://www.planwallpaper.com/static/cache/6f/82/6f8200c95d588fde83d1f212f674611a.jpg");
}

Answer 3

使用CSS了解未被注意的选择器的好问题，

此外，您可以阅读有关其他选择器的更多信息，

例如：

img: hover {}

以及其他一些不错的选择器 适用于不同的元素范围

:active

:after

:before

:first-child

:first-letter

:first-line

:focus

:hover

:lang

:link

:visited

您甚至可以有条件地选择：

img[src="setting-icon.png"] {
    border: 1px solid #000000;
    content:url("/new/image/source.png");
}

参考：W3.org - Advanced Selectors