Replace src of image tag using css property

Question

Is there any way I can replace the image specified in the SRC attribute of the image tab with any css trick?

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

I want to replace the-icon.png parameter with the css property, I can put another image in the background using the background-image property of the image tag, but I need to hide the one specified in src and show that one I specify in background-image property in css.

Yes, this is a strange requirement, but I am doing the customization in a third-party application, where I have only control over css, I can’t change the HTML tags.

Thanks for reading!

Answer 1

you can use 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.

, src img. @pol

Answer 2

html CSS, javascript.

CSS "" .

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");
}

<img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg">

<div>Changed img:</div>
<div><img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg"></div>

Hide result

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 -