Est-il possible de définir l'équivalent d'un attribut src d'une balise img en CSS?

533

Est-il possible de définir la srcvaleur d'attribut en CSS? À l'heure actuelle, ce que je fais, c'est:

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

et je veux que ce soit quelque chose comme ça

<img class="myClass" />
.myClass {
    some-src-property: url("pathTo/myImage.jpg");

Je veux le faire sans utiliser les propriétés backgroundou background-image:en CSS.

html css image Rakesh Juyal
la source
1
Cela va apparemment être possible dans CSS3: w3.org/TR/css3-values/#attribute
graphicdivine
7
C'est désormais possible. Testé sur Chrome / Safari / Opera: stackoverflow.com/a/11484688/632951
Pacerier
2
Mais FireFox 30.0, Internet Explorer 11.0 ne prend pas en charge
Laxmikant Dange
Cette seule solution CSS a fonctionné pour moi (dans tous les navigateurs): stackoverflow.com/a/19114098/448816 , à l'exception que j'ai dû ajouter: 'background-size: 100%;'.
mikhail-t
(2020) Vous pouvez le faire avec JS getPropertyValue("--src")voir: jsfiddle.net/CustomElementsExamples/vjfpu3a2
Danny '365CSI' Engelman

Réponses:

882

Utilisez content:url("image.jpg").

Solution de travail complète ( Live Demo):

<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>
Développer l'extrait

Testé et fonctionnel:

  • Chrome 14.0.835.163
  • Safari 4.0.5
  • Opera 10.6

Testé et ne fonctionne pas :

  • FireFox 40.0.2 (en observant Developer Network Tools, vous pouvez voir que l'URL se charge, mais l'image ne s'affiche pas)
  • Internet Explorer 11.0.9600.17905 (l'URL ne se charge jamais)
Pacerier
la source
7
@gotqn, uniquement Chrome Safari Opera jusqu'à présent.
Pacerier
36
@EricG, différentes applications ont des exigences différentes. Si cela ne correspond pas à vos besoins, ne l'utilisez pas. Si c'est le cas, utilisez-le.
Pacerier
4
Ne pas fonctionner IE10 est un no-go. Nous abandonnons IE7 (ne parlons pas d'IE6). IE8 aussi, si nécessaire. Mais IE9 - IE10 ... non.
Rolf
11
Il convient d'ajouter que même dans les navigateurs prenant en charge l'attribution contentà img, il modifie son comportement. L'image commence à ignorer les attributs de taille, et dans Chrome / Safari, elle perd les options du menu contextuel comme «Enregistrer l'image». En effet , l' affectation d' une manière contentefficace convertit imgde remplacer vide élément à quelque chose comme <span><img></span>.
Ilya Streltsyn
3
sans prise en charge appropriée du navigateur, je ne vois pas cela comme une réponse valide, désolé.
emachine
183

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

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

Comment ça fonctionne:

  • L'image est rétrécie jusqu'à ne plus être visible par la largeur et la hauteur.
  • Ensuite, vous devez «réinitialiser» la taille de l'image avec un rembourrage. Celui-ci donne une image 16x16. Bien sûr, vous pouvez utiliser padding-left / padding-top pour créer des images rectangulaires.
  • Enfin, la nouvelle image y est mise en arrière-plan.
  • Si la nouvelle image d'arrière-plan est trop grande ou trop petite, je recommande d'utiliser background-sizepar exemple: background-size:cover;qui adapte votre image dans l'espace alloué.

Cela fonctionne également pour les images de soumission, elles restent cliquables.

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

Prendre plaisir!

RobAu
la source
6
@RobAnu: Cela fonctionne plutôt bien - jsfiddle
TimPietrusky
9
Je dois vous dire que c'est fascinant et intelligent, mais un DIV vide est plus simple.
Volomike
11
Dans ce cas, c'est le cas. Il existe cependant des cas où vous ne pouvez pas contrôler le HTML et souhaitez néanmoins manipuler l'IMG. Là, cette solution fonctionnera également
RobAu
2
Si l'image a un srcattribut, c'est la technique dont vous avez besoin. +1 - m'a beaucoup aidé
James Long
3
Pas de classement sur cette réponse, ce qui pourrait être la solution pour certaines applications, mais cette méthode a une limitation. Vous n'avez aucun contrôle sur les dimensions du rendu du fichier image. En utilisation normale, vous pouvez contrôler la hauteur-largeur d'une image, si le fichier est spécifié dans la source. Mais ce n'est fondamentalement pas différent d'un div avec une image de fond, où si votre div est plus grand que l'image, vous n'avez pas de chance.
TARKUS
114

Une collection de méthodes possibles pour définir des images à partir de CSS

Le :afterpseudo-élément de CSS2 ou la syntaxe la plus récente::after de CSS3 avec la content:propriété:

Première recommandation W3C: Feuilles de style en cascade, niveau 2 Spécification CSS2 12 mai 1998
Dernière recommandation W3C: Sélecteurs Niveau 3 Recommandation W3C 29 septembre 2011

Cette méthode ajoute du contenu juste après le contenu de l'arborescence de documents d'un élément.

Remarque: certains navigateurs affichent expérimentalement la contentpropriété directement sur certains sélecteurs d'éléments sans tenir compte de la dernière recommandation du W3C qui définit:

S'applique à: :beforeet aux :afterpseudo-éléments

Syntaxe CSS2 (compatible avec l'avant): 

.myClass:after {
  content: url("somepicture.jpg");
}

Sélecteur CSS3: 

.myClass::after {
  content: url("somepicture.jpg");
}

Rendu par défaut: taille d'origine (ne dépend pas d'une déclaration de taille explicite)

Cette spécification ne définit pas entièrement l'interaction de: avant et: après avec les éléments remplacés (comme IMG en HTML). Cela sera défini plus en détail dans une future spécification.

mais même au moment d'écrire ces lignes, le comportement avec une <IMG>balise n'est toujours pas défini et bien qu'il puisse être utilisé de manière piratée et non conforme aux normes , son utilisation <img>n'est pas recommandée !

Grande méthode candidate, voir les conclusions ...

CSS1 de » background-image:biens:

Première recommandation du W3C: feuilles de style en cascade, niveau 1 17 déc 1996

Cette propriété définit l'image d'arrière-plan d'un élément. Lors de la définition d'une image d'arrière-plan, il convient également de définir une couleur d'arrière-plan qui sera utilisée lorsque l'image n'est pas disponible. Lorsque l'image est disponible, elle est superposée au-dessus de la couleur d'arrière-plan.

Cette propriété existe depuis le début de CSS et mérite néanmoins une mention glorieuse.

Rendu par défaut: Taille d'origine (ne peut pas être mis à l'échelle, uniquement positionné)

Cependant ,

La background-size:propriété de CSS3 s'est améliorée en permettant plusieurs options de mise à l'échelle:

Dernier statut du W3C: Recommandation du candidat Module Contexte et frontières CSS Niveau 3 9 septembre 2014

[length> | <percentage> | auto ]{1,2} | cover | contain

Mais même avec cette propriété, cela dépend de la taille du conteneur.

Encore une bonne méthode candidate, voir les conclusions ...

La list-style:propriété de CSS2 avec display: list-item:

Première recommandation du W3C: feuilles de style en cascade, spécification CSS2 de niveau 2 12 mai 1998

list-style-image: La propriété définit l'image qui sera utilisée comme marqueur d'élément de liste (puce)

Les propriétés de liste décrivent la mise en forme visuelle de base des listes: elles permettent aux feuilles de style de spécifier le type de marqueur ( image , glyphe ou nombre)

display: list-item- Cette valeur fait qu'un élément (par exemple, <li>en HTML) génère une boîte de bloc principale et une boîte de marqueur.

.myClass {
    display: list-item;
    list-style-position: inside;
    list-style-image: url("someimage.jpg");
}

CSS raccourci: ( <list-style-type> <list-style-position> <list-style-image>) 

.myClass {
    display: list-item;
    list-style: square inside url("someimage.jpg");
}

Rendu par défaut: taille d'origine (ne dépend pas d'une déclaration de taille explicite)

Restrictions:

  • L'héritage transfère les valeurs de «style de liste» des éléments OL et UL aux éléments LI. Il s'agit de la méthode recommandée pour spécifier les informations de style de liste.

  • Ils ne permettent pas aux auteurs de spécifier un style distinct (couleurs, polices, alignement , etc.) pour le marqueur de liste ou d'ajuster sa position

Cette méthode ne convient pas non plus à la <img>balise, car la conversion ne peut pas être effectuée entre les types d'éléments, et voici le hack limité et non conforme qui ne fonctionne pas sur Chrome.

Bonne méthode candidate, voir conclusions ...

CSS3 de » border-image:biens recommandation :

Dernier statut du W3C: Recommandation du candidat Module Contexte et frontières CSS Niveau 3 9 septembre 2014

Une méthode de type arrière-plan qui repose sur la spécification des tailles d'une manière plutôt particulière (non définie pour ce cas d'utilisation) et les propriétés de bordure de secours jusqu'à présent (par exemple. border: solid):

Notez que, même si elles ne provoquent jamais de mécanisme de défilement, les images de départ peuvent toujours être écrêtées par un ancêtre ou par la fenêtre.

Cet exemple illustre l'image composée uniquement en tant que décoration d' angle inférieur droit :

.myClass {
    border: solid;
    border-width: 0 480px 320px 0;
    border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}

S'applique à: Tous les éléments, à l'exception des éléments de table internes lorsque border-collapse: collapse

Il ne peut toujours pas changer un <img>tag » src(mais voici un hack ), au lieu que nous pouvons décorer:

Afficher l'extrait de code

Bonne méthode candidate à considérer après la propagation des normes.

Le projet deelement() notation de CSS3 mérite également d'être mentionné:

Remarque: La element()fonction ne reproduit que l' apparence de l'élément référencé, pas le contenu réel et sa structure.

<div id="img1"></div>

<img id="pic1" src="http://i.imgur.com/uKnMvyp.jpg" class="hide" alt="wolf">
<img id="pic2" src="http://i.imgur.com/TOUfCfL.jpg" class="hide" alt="cat">

Nous utiliserons le contenu rendu de l'une des deux images cachées pour changer l' arrière-plan de l'image en #img1fonction du sélecteur d'ID via CSS:

#img1 {
    width: 480px; 
    height: 320px; 
    background: -moz-element(#pic1) no-repeat;
    background-size: 100% 100%;
}

.hide {display: none}

Notes: C'est expérimental et ne fonctionne qu'avec le -mozpréfixe dans Firefox et uniquement sur backgroundou background-imagepropriétés, nécessite également des tailles spécifiées.

Conclusions

  1. Tout contenu sémantique ou information structurelle est en HTML.
  2. Les informations de style et de présentation vont en CSS.
  3. À des fins de référencement, ne cachez pas d' images significatives en CSS.
  4. Les graphiques d'arrière-plan sont généralement désactivés lors de l'impression.
  5. Les balises personnalisées peuvent être utilisées et stylisées à partir de CSS, mais les versions primitives d'Internet Explorer ne comprennent pas] ( IE ne stylise pas les balises HTML5 (avec shiv) ) sans Javascript ni guidage CSS .
  6. Les SPA (Single Page Applications), par conception, incorporent généralement des images en arrière-plan

Cela dit, explorons les balises HTML adaptées à l'affichage des images:

L' <li>élément [HTML4.01 +]

Cas d'utilisation parfait de la méthode list-style-imagewith display: list-item.

L' <li>élément, peut être vide, permet le contenu du flux et il est même permis d'omettre la </li>balise de fin.

Afficher l'extrait de code

Limitations: difficile à coiffer ( width:ou float:pourrait aider)

L' <figure>élément [HTML5 +]

L'élément figure représente un contenu de flux, éventuellement avec une légende, qui est autonome (comme une phrase complète) et est généralement référencé comme une seule unité du flux principal du document.

L'élément est valide sans contenu, mais il est recommandé de contenir un <figcaption>.

L'élément peut ainsi être utilisé pour annoter des illustrations, des diagrammes, des photos , des listes de codes, etc.

Rendu par défaut: l'élément est aligné à droite, avec un rembourrage à gauche et à droite!

L' <object>élément [HTML4 +]

Pour inclure des images, les auteurs peuvent utiliser l'élément OBJECT ou l'élément IMG.

L' dataattribut est obligatoire et peut avoir un type MIME valide comme valeur! 

<object data="data:x-image/x,"></object>

Note: une astuce pour utiliser la <object>balise de CSS serait de définir une mesure MimeType valide x-image/xsuivie d'aucune donnée (valeur n'a pas de données après la virgule requise, )

Rendu par défaut: 300 x 150 px, mais la taille peut être spécifiée en HTML ou CSS.

le <SVG> tag

Nécessite un navigateur compatible SVG et possède un <image>élément pour les images raster

L' <canvas>élément [HTML5 +].

L' widthattribut par défaut est 300 et l' heightattribut par défaut 150 .

L' <input>élément avectype="image"

Limites:

... l'élément devrait ressembler à un bouton pour indiquer que l'élément est un bouton.

que Chrome suit et rend un carré vide 4x4px quand aucun texte

Solution partielle, définissez value=" ": 

<input type="image" id="img1" value=" ">

Faites également attention à l' <picture>élément à venir dans HTML5.1 , actuellement un brouillon de travail .

CSᵠ
la source
(2020) Utilisez les propriétés CSS: stackoverflow.com/questions/2182716/…
Danny '365CSI' Engelman
Excellente réponse mais montre l'échec complet du Web en tant que plateforme pour fournir des primitives de base.
serraosays
26

j'ai utilisé la solution div vide, avec ce CSS:

#throbber {
    background-image: url(/Content/pictures/ajax-loader.gif);
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

HTML:

<div id="throbber"></div>
Emmanuel Touzery
la source
Et si je veux l'afficher en ligne? L'ajout de "display: inline" donne ma dimension div de 0x0 ...
elsurudo
1
@elsurudo Utilisez display: inline-block si vous souhaitez définir une largeur et une hauteur sur un élément en ligne
Erin Drummond
1
La première réponse ne fonctionne pas avec Firefox, donc j'aime plus votre réponse! Et c'est clair et pas de hacks css.
Sergey Bogdanov
Si vous avez besoin d'afficher plusieurs images, gardez à l'esprit que le champ id est techniquement supposé être unique, donc l'utilisation d'un sélecteur de classe CSS au lieu de l'ID est idéale.
mix3d
Les images de ce type ne s'imprimeront pas correctement si les graphiques d'arrière-plan sont désactivés dans les paramètres d'impression.
posfan12
14

J'ai trouvé un meilleur moyen que les solutions proposées, mais il utilise effectivement l'image d'arrière-plan. 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;
}

L'ancienne image n'est pas vue et la nouvelle est vue comme prévu.


La solution soignée suivante 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 */

}
EricG
la source
C'est une astuce intéressante, mais est-ce vraiment conforme aux normes? La page W3C indique que la contentpropriété ne s'applique qu'aux classes :beforeet :afterpseudo. De plus, si vous devez prendre en charge IE7 ou une version antérieure, je pense que la contentprise en charge est inexistante. Pourtant, très tentant.
jatrim
Vous avez raison, je viens de trouver une méthode plus conforme. Mise à jour de mon message! Maintenant, vote moi;) Haha.
EricG
L'approche mise à jour est certainement meilleure que celle qui repose sur le contenu. Merci d'avoir inclus le lien d'origine. C'était perspicace. Vous remarquerez que la réponse de @ RobAu est également très similaire à votre version mise à jour.
jatrim
1
@jatrim La contentpropriété s'applique à tous les éléments. http://www.w3.org/TR/css3-content/#content
XP1
13

Ils ont raison. IMG est un élément de contenu et CSS concerne la conception. Mais qu'en est-il lorsque vous utilisez certains éléments de contenu ou propriétés à des fins de conception? J'ai IMG sur mes pages Web qui doivent changer si je change de style (le CSS).

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

  1. créer un gif transparent 1x1 ou png.
  2. Attribuez la propriété "src" d'IMG à cette image.
  3. Définissez la présentation finale avec "background-image" dans le style CSS.

Il fonctionne comme un charme :)

Franc
la source
5
-1 Même si votre réponse n'est pas mauvaise, il mentionne spécifiquement qu'il ne veut pas utiliserbackground*
fresskoma
1
c'est une astuce ... à mon avis, les astuces seront modifiées par les navigateurs ... et un jour le matin, vous verrez un enfer dans votre site Web: D :)))
Mahdi Jazini
11

Voici une très bonne solution -> http://css-tricks.com/replace-the-image-in-an-img-with-css/

Pro (s) et Con (s):
(+) fonctionne avec le vecteur image qui a une largeur / hauteur relative (une chose que la réponse de RobAu ne gère pas) (+) est un navigateur croisé (fonctionne également pour IE8 +) (+) il utilise uniquement CSS. Donc pas besoin de modifier l'img src (ou si vous n'avez pas accès / ne voulez pas changer l'attribut img src déjà existant). (-) désolé, il utilise l'attribut css d'arrière-plan :)


OviC
la source
Maintenant, c'est la bonne solution, fonctionne pour moi dans tous les navigateurs, merci !! Il convient également de mentionner que j'ai dû ajouter: taille de l'arrière-plan: 100%; à la classe css dans la solution ci-dessus pour que l'image de remplacement s'affiche correctement.
mikhail-t
9

Vous pouvez définir 2 images dans votre code HTML et utiliser display: none;pour décider laquelle sera visible.

Kostas Andrianopoulos
la source
Je cherchais de loin une solution qui était Web Responsive mais qui maintenait également le référencement. Je voulais utiliser des requêtes multimédias en CSS pour changer mon image en fonction de l'appareil utilisé, mais je voulais garder mon contenu en HTML. Déclarer des sources en CSS était une voie que je ne voulais pas suivre, ce background-imagen'était donc pas une option. Je voulais des imgbalises à des fins de référencement. Votre réponse est si simple, élégante et résout tous mes obstacles! Bravo! L'utilisateur n'a pas non plus à télécharger les deux images. De plus, je peux ajouter n'importe quel nombre d'images.
Xavier
Chaque réponse que j'ai lue jusqu'à présent m'obligerait à déclarer mes sources dans ma feuille de style ou à utiliser du CSS en ligne dans mon balisage. Ni l'un ni l'autre dont j'étais satisfait. Code en désordre!
Xavier
7

Non, vous ne pouvez pas définir l'attribut image src via CSS. Le plus proche que vous pouvez obtenir est, comme vous le dites, backgroundou background-image. Je ne recommanderais pas de le faire de toute façon car ce serait quelque peu illogique.

Cependant, une solution CSS3 est à votre disposition si les navigateurs que vous ciblez sont capables de l'utiliser. Utilisez content:url comme décrit dans la réponse de Pacerier . Vous pouvez trouver d'autres solutions multi-navigateurs dans les autres réponses ci-dessous.

cletus
la source
1
pourquoi le vote bas? cette réponse est plus précise que la réponse acceptée.
harsimranb
1
Jusqu'à présent, la meilleure réponse: NON, vous ne pouvez pas le faire avec CSS.
Milche Patern
4

Mettez plusieurs images dans un conteneur "contrôlant" et changez plutôt la classe du conteneur. En CSS, ajoutez des règles pour gérer la visibilité des images en fonction de la classe du conteneur. Cela produira le même effet que le changement de img srcpropriété d'une seule image.

HTML:

<span id="light" class="red">
    <img class="red" src="red.png" />
    <img class="yellow" src="yellow.png" />
    <img class="green" src="green.png" />
</span>

CSS:

#light         { ... }
#light         *        { display: none; }     // all images are hidden
#light.red     .red     { display: inline; }   // show red image when #light is red
#light.yellow  .yellow  { display: inline; }   // .. or yellow
#light.green   .green   { display: inline; }   // .. or green

Notez qu'il préchargera toutes les images, comme avec les CSS backround-image, mais contrairement à la modification img srcvia JS.

Bronx
la source
3

Voie alternative

.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
Tukaz
la source
3

Quelques données que je laisserais en HTML, mais il vaut mieux définir le src en CSS:

<img alt="Test Alt text" title="Title text" class="logo">

.logo {
    content:url('../images/logo.png');
}
Renat Gatin
la source
2

Pour autant que je sache, VOUS NE POUVEZ PAS. CSS concerne le style et le src de l'image est le contenu.

NawaMan
la source
3
De nos jours, bien souvent, les images ne sont là que pour styliser la page.
Lorenzo Polidori
2
L'implication est qu'il peut y avoir une différence entre les images utilisées comme bordures, arrière-plans, etc. et celles qui font réellement partie du contenu de la page, c'est-à-dire. diagrammes, photos d'articles, etc.
Rhys van der Waerden
1
VOUS POUVEZ, et il y a des cas courants et valides où vous voudriez.
ryan0
2

Pour réitérer une solution antérieure et souligner la pure implémentation CSS, voici ma réponse.

Une solution Pure CSS est nécessaire dans les cas où vous vous approvisionnez en contenu à partir d'un autre site, et donc vous n'avez aucun contrôle sur le HTML qui est livré. Dans mon cas, j'essaie de supprimer la marque du contenu source sous licence afin que le titulaire de licence n'ait pas à faire de publicité pour la société auprès de laquelle il achète le contenu. Par conséquent, je supprime leur logo tout en conservant tout le reste. Je dois noter que cela fait partie du contrat de mon client pour le faire.

{ /* image size is 204x30 */
     width:0;
     height:0;
     padding-left:102px;
     padding-right:102px;
     padding-top:15px;
     padding-bottom:15px;
     background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}
Daniel Byrne
la source
2

Je sais que c'est une très vieille question, mais aucune réponse ne fournit le raisonnement approprié pour expliquer pourquoi cela ne peut jamais être fait. Bien que vous puissiez "faire" ce que vous cherchez, vous ne pouvez pas le faire d'une manière valide. Pour avoir une balise img valide, elle doit avoir les attributs src et alt.

Donc, toutes les réponses donnant un moyen de le faire avec une balise img qui n'utilise pas l'attribut src encouragent l'utilisation de code non valide.

En bref: ce que vous recherchez ne peut pas être fait légalement dans la structure de la syntaxe.

Source: validateur W3

Geowil
la source
2

Ou vous pouvez faire cela que j'ai trouvé sur le truc interweb.

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">
.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

Masquez donc efficacement l'image et remplissez l'arrière-plan. Oh quel hack mais si vous voulez une balise IMG avec du texte alternatif et un arrière-plan qui peut évoluer sans utiliser JavaScript?

Dans un projet sur lequel je travaille maintenant, j'ai créé un modèle de brindille de bloc de héros

<div class="hero">
  <img class="image" src="{{ bgImageSrc }}"
       alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>
Pocketninja
la source
1

Si vous ne souhaitez pas définir une propriété d'arrière-plan, vous ne pouvez pas définir l'attribut src d'une image en utilisant uniquement CSS.

Alternativement, vous pouvez utiliser JavaScript pour faire une telle chose.

Guillaume Flandre
la source
1

En utilisant CSS, cela ne peut pas être fait. Mais, si vous utilisez JQuery, quelque chose comme ça fera l'affaire:

$("img.myClass").attr("src", "http://somwhere");
Veera
la source
en fait, il peut)) voir la réponse à cette même question ici: stackoverflow.com/questions/2182716/…
mikhail-t
1

Vous pouvez le convertir avec JS:

$('.image-class').each(function(){
    var processing = $(this).attr('src');
    $(this).parent().css({'background-image':'url('+processing+')'});
    $(this).hide();
});
Raul Martin
la source
0

Si vous essayez d'ajouter une image dans un bouton dynamiquement en fonction du contexte de votre projet, vous pouvez utiliser le? prendre pour référencer la source en fonction d'un résultat. Ici, j'utilise la conception mvvm pour laisser ma valeur Model.Phases [0] déterminer si je veux que mon bouton soit rempli d'images d'une ampoule allumée ou éteinte en fonction de la valeur de la phase lumineuse.

Je ne sais pas si cela aide. J'utilise JqueryUI, Blueprint et CSS. La définition de classe devrait vous permettre de styliser le bouton en fonction de ce que vous souhaitez.

    <button>                           
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>                             
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>   
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>

Tschlegel
la source
0

J'ajouterais ceci: l'image d'arrière-plan pourrait également être positionnée avec background-position: x y;(x horizontal y vertical). (..) Mon cas, CSS:

(..) 
#header {
  height: 100px; 
  background-image: url(http://.../head6.jpg); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-color: grey; 
  (..)
} 
(...)
John
la source
0

Code HTML: 

<!DOCTYPE html>
<html>
     <head>
         <link type="text/css" rel="stylesheet" href="css destination" />
     </head>
     <body>
<!-- click-able pic with link -->
           <a href="site you want"> 
<!-- Take the off if you don't want click-able link -->
                <h1 id(or class)="nameOfClassorid">
                     <span>Text that is not important</span>
                </h1>
           </a>
      </body>
 </html>

Code CSS:

span {
     display: none;
}
h1 id or class {
     height: of pic;
     width: of pic;
/* Only flaw (so far) read bottom */
     background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
     background-image:url(/* 'new background!!!' */);
}

J'étudie le html après l'école depuis quelques jours et je voulais savoir comment faire. J'ai découvert l'arrière-plan, puis réuni 2 et 2. Cela fonctionne à 100%, j'ai vérifié, sinon assurez-vous de remplir les choses nécessaires !!! Il faut préciser la hauteur, car sans elle il n'y aurait rien !!! Je vais laisser ce shell de base que vous pouvez ajouter.

Exemple:

 <!DOCTYPE html>
 <html>
     <head>
         <link type="text/css" rel="stylesheet" href="style.css" />
     </head>
     <body>
           <a href="http:localhost"> 
                <h1>
                     <span>Text that is not important</span>
                </h1>
           </a>
     </body>
 </html>
span {
     display: none;
}
h1 {
     height: 100px;
     width: 100px;
     background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/[email protected]");
}

h1:hover {
     height: 300px;
     width: 300px;
     background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}

PS Oui je suis un utilisateur Linux;)

Z_Doctor
la source
0

Toute méthode basée sur backgroundou background-imagesusceptible d'échouer lorsque l'utilisateur imprime le document avec "Imprimer les couleurs et les images d' arrière-plan " est désactivée. Ce qui est malheureusement le défaut typique d'un navigateur.

La seule méthode imprimable et compatible avec tous les navigateurs est celle proposée par Bronx.

Simon Rozman
la source
0

Chargement d'IMG src à partir d'une définition CSS, à l'aide de propriétés CSS modernes

<style>
  body {
    --imgid: 1025; /* optional default img */
  }

  .shoes {
    --imgid: 21;
  }

  .bridge {
    --imgid: 84;
  }

  img {
    --src: "//i.picsum.photos/id/"var(--imgid)"/180/180.jpg"
  }

</style>
<script>
  function loadIMG(img) {
    img.src = getComputedStyle(img)	// compute style for img
      .getPropertyValue("--src")		// get css property
      .replace(/[" ]/g, "");				// strip quotes and space
  }

</script>
<img src onerror=loadIMG(this) class=bridge>
<img src onerror=loadIMG(this) class=shoes>
<img src onerror=loadIMG(this)>
Développer l'extrait

  • la srcdéfinition vide sur un <IMG> déclenche le gestionnaire onerror: fonction loadIMG
  • La fonction loadIMG calcule la valeur CSS
  • supprime tous les caractères illégaux
  • définit l'IMG.src
  • lorsque le CSS change, l'image n'est PAS mise à jour! Vous devez appeler à nouveau loadIMG

JSFiddle: https://jsfiddle.net/CustomElementsExamples/vjfpu3a2/

Réponses SO associées: WCPROPS

Danny '365CSI' Engelman
la source
-2

Utilisez simplement HTML5 :) 

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>
Max
la source
L'OP cherche spécifiquement à nettoyer leur balisage HTML avec une solution CSS. Cette réponse ne ferait qu'encombrer davantage le balisage.
webaholik