web-dev-qa-db-fra.com

Remplacer l'emplacement du src de l'image à l'aide de CSS

J'ai un site Web qui a une image avec un attribut src et je voudrais changer l'emplacement src de cette image avec une image de la mienne. L'image vit dans une composante div. Je ne peux pas changer le HTML et cherche des moyens de le changer en utilisant CSS uniquement s'il vous plaît.

Composant Div:

<div class="application-title">
<img style="margin-top: 3px;height: 45px;" src="image.svgz">
</div>

Composant d'image (fichier CSS):

.application-title IMG
{
    float: left;
    margin-top: 5px;
    margin-right: 10px;
    opacity: 1;
    margin-left: 0px;
    visibility: hidden;
}
htmlcssimage
16
Neophile

Vous pouvez utiliser une image d'arrière-plan

.application-title img {
  width:200px;
  height:200px;
  box-sizing:border-box;
  padding-left: 200px;
  /*width of the image*/
  background: url(http://lorempixel.com/200/200/city/2) left top no-repeat;
}
<div class="application-title">
  <img src="http://lorempixel.com/200/200/city/1/">
</div><br />
Original Image: <br />

<img src="http://lorempixel.com/200/200/city/1/">
38
Pete

Voici un autre hack sale :)

.application-title > img {
display: none;
}

.application-title::before {
content: url(path/example.jpg);
}
14
matcygan

Vous pourriez le faire mais c'est hacky

.application-title {
   background:url("/path/to/image.png");
   /* set these dims according to your image size */
   width:500px;
   height:500px;
}

.application-title img {
   display:none;
}

Voici un exemple de travail:

http://jsfiddle.net/5tbxkzzc/

4
lharby

Vous pouvez supprimer l'image

.application-title IMG {
    display:none;
}

Et ajoutez le vôtre au conteneur

.application-title {
    background-image: url("pathtoyourimage/header.png");
    height: 200px; //set it to your image height.
}
2
Persijn