Comment pouvons nous spécifier attribut src de la balise img dans CSS ?

Question

Est-il possible de définir la valeur de l’attribut src dans CSS. À l’heure actuelle, ce que je fais est :-

et je veux qu’il soit quelque chose comme ça

en outre, je ne veux pas utiliser le ou propriété.

Answer 1

Utilisation `` .

Plein de solution de travail ( Live Demo ) :

Testé et fonctionnel :

• Chrome 14.0.835.163
• Safari 4.0.5
• Opéra 10.6

Testé et pas (pas !) de travail :

• FireFox 30,0
• Internet Explorer 11.0

Answer 2

Il y a une solution que j'ai trouvé aujourd'hui (fonctionne sous IE6+, FF, Opera, Chrome):

<img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

Comment il fonctionne:

• L'image est réduit jusqu'à ne plus visible par la largeur et de la hauteur.
• Ensuite, vous avez besoin de "réinitialiser" la taille de l'image; là, j'ai utiliser le rembourrage (cet on donne une image 16x16, bien sûr, vous pouvez utiliser padding-left / padding-top pour faire des images rectangulaires)
• Enfin, la nouvelle image y est mis en arrière-plan

Il travaille également pour présenter d'entrée des images, ils restent cliquables.

Voir la démo en live: http://www.audenaerde.org/csstricks.html#imagereplacecss

Profitez-en!

Answer 3

J’ai utilisé la solution div vide, avec ce CSS :

HTML :

Answer 4

J'ai trouvé une meilleure façon que les solutions proposées, mais il ne l'utiliser en arrière-plan, image en effet. Méthode conforme (ne peut pas confirmer pour IE6) Crédits: http://www.kryogenix.org/code/browser/lir/

<img src="pathTo/myImage.jpg"/>

Le CSS:

img[src*="pathTo/myImage.jpg"] {

    background-image: url("mynewimg.jpg"); /* lets say 20x20 */
    width: 20px;

    display:inline-block;
    padding: 20px 0 0 0;
    height: 0px !important;

    /* for IE 5.5's bad box model */
    height /**/:20px;
}

La vieille image n'est pas visible et le nouveau est vu comme prévu.

Le suivant soigné solution ne fonctionne que pour webkit

img[src*="pathTo/myImage.jpg"] {

    /* note :) */
    content:'';
    display:inline-block;

    width: 20px;
    height: 20px;
    background-image: url("mynewimg.jpg"); /* lets say 20x20 */

}

Answer 5

Ils sont de droite. IMG est un élément de contenu et de CSS est à propos de la conception. Mais, comment faire lorsque vous utilisez certains éléments de contenu ou de propriétés à des fins de conception? J'ai IMG travers mes pages web qui doit changer si je change de style (CSS).

Eh bien c'est une solution pour la définition IMG présentation (pas vraiment l'image) dans la feuille de style CSS.

1. créer une 1x1 transparent gif ou png.
   
2. Attribuer propery "src" de l'IMG à cette image.
   
3. Définir la présentation finale avec "background-image" dans la feuille de style CSS.
   

Il fonctionne comme un charme :)