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


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

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

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

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

Je veux faire ça sans pour autant en utilisant le background ou background-image: propriétés en CSS.


422
2018-02-02 08:33


origine


Réponses:


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

Solution de travail complète (Démo en direct):

<!doctype html>

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

<img class="MyClass123"/>

Testé et fonctionnant:

  • Chrome 14.0.835.163
  • Safari 4.0.5
  • Opera 10.6

Testé et ne pas travail:

  • FireFox 40.0.2 (en observant Developer Network Tools, vous pouvez voir que l'URL se charge, mais l'image n'est pas affichée)
  • Internet Explorer 11.0.9600.17905 (l'URL ne se charge jamais)

699
2017-07-14 14:51



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

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

Comment ça marche:

  • L'image est rétrécie jusqu'à ce qu'elle ne soit plus visible par la largeur et la hauteur.
  • Ensuite, vous devez réinitialiser la taille de l'image avec un remplissage. Ce on donne une image 16x16. Bien sûr, vous pouvez utiliser padding-gauche / padding-top pour faire des images rectangulaires.
  • Enfin, la nouvelle image est mise en arrière-plan.
  • Si la nouvelle image de fond est trop grande ou trop petite, je recommande d'utiliser background-size par exemple: background-size:cover; qui correspond à votre image dans l'espace alloué.

Cela fonctionne aussi pour les images de type submit-input, elles restent cliquables.

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

Prendre plaisir!


159
2018-04-20 13:48



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


CSS2de :after pseudo-élément ou le plus récent syntaxe ::after de CSS3 avec le content: propriété:

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

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

Note: certains navigateurs expérimentalement rendre le content propriété directement sur certains les sélecteurs d'élément ignorent même la dernière recommandation du W3C qui définit:

S'applique à: :before et :after pseudo-éléments

Syntaxe CSS2 (compatible vers l'avant):

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

Sélecteur CSS3:

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

Rendu par défaut: Format original (ne dépend pas de la déclaration de taille explicite)

Cette spécification ne définit pas entièrement l'interaction de: before et: after avec des éléments remplacés (tels que IMG en HTML). Ceci sera défini plus en détail dans une future spécification.

mais même au moment de cette écriture, le comportement avec un <IMG> tag n'est toujours pas défini et bien qu'il puisse être utilisé dans un manière piratée et non conforme aux normes, utilisation avec <img> n'est pas recommandé!

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



CSS1de background-image: propriété:

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. Lorsque vous définissez une image d'arrière-plan, vous devez également définir une couleur d'arrière-plan qui sera utilisée lorsque l'image est indisponible. Lorsque l'image est disponible, elle est superposée à la couleur d'arrière-plan.

Cette propriété a été autour depuis le début de CSS et pourtant elle mérite une mention glorieuse.

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

toutefois,

CSS3de background-size: propriété améliorée en autorisant 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 ...



CSS2de list-style: la propriété avec display: list-item:

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

list-style-image: property définit l'image qui sera utilisée comme marqueur d'élément de liste (bullet)

Les propriétés de la 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 provoque un élément (par exemple, <li> en HTML) pour générer un bloc de bloc principal et une boîte de marqueur.

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

CSS sténographique: (<list-style-type> <list-style-position> <list-style-image>)

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

Rendu par défaut: Format original (ne dépend pas de la déclaration de taille explicite)

Restrictions:

  • L'héritage transférera les valeurs de style liste des éléments OL et UL aux éléments LI. C'est 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 ajuster son position

Cette méthode ne convient pas non plus pour le <img> tag comme la conversion ne peut pas être faite entre les types d'éléments, et voici le hack limité, non conforme cela ne fonctionne pas sur Chrome.

Bonne méthode de candidat, voir les conclusions ...



CSS3de border-image: propriété recommandation:

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

UNE type d'arrière-plan méthode qui repose sur la spécification des tailles d'une manière assez particulière (non défini pour ce cas d'utilisation) et les propriétés de bordure de repli jusque là (par exemple. border: solid):

Notez que, même s’ils ne provoquent jamais un mécanisme de défilement,   les images peuvent toujours être découpées par un ancêtre ou par la fenêtre d'affichage.

Cet exemple illustre l'image en cours composé seulement comme un coin en bas à droite décoration:

.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 changement un <img>Tag src (mais voici un hack), au lieu de cela nous pouvons le décorer:

.myClass {
    border: solid;
    border-width: 0 96px 96px 0;
    border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png") 0 100% 100% 0;
}
<img width="300" height="120" src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg" class="myClass"

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



CSS3de element() notation document de travail vaut aussi la mention:

Noter la element() fonction ne reproduit que la 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 allons utiliser le contenu rendu de l'un des deux images cachées changer l'image Contexte dans #img1 basé sur Identifiant 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 -moz préfixe dans Firefox et seulement sur background ou background-image propriétés, nécessite également les tailles spécifiées.


Conclusions

  1. Tout contenu sémantique ou information structurelle passe en HTML.
  2. Les informations de style et de présentation vont dans CSS.
  3. À des fins de référencement, ne pas cacher images significatives en CSS.
  4. Les graphiques d'arrière-plan sont généralement désactivés lors de l'impression.
  5. Tags personnalisés pourrait être utilisé et stylé à partir de CSS, mais primitif versions d'Internet Explorer ne comprend pas sans Javascript ou CSS orientation.
  6. Les SPA (applications de page unique), par conception, intègrent généralement des images en arrière-plan

Cela dit, explorons les balises HTML adaptées à l'affichage de l'image:

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

Parfait usecase de la list-style-image avec display: list-item méthode.

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

.bulletPics > li {display: list-item}
#img1 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Nuvola_erotic.png")}
#img2 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/7/74/Globe_icon_2014-06-26_22-09.png")}
#img3 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/c/c4/Kiwi_fruit.jpg")}
<ul class="bulletPics">
    <li id="img1">movie</li>
    <li id="img2">earth</li>
    <li id="img3">kiwi</li>
</ul>

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

le <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é à partir 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 illustrations, diagrammes, photos, listes de codes, etc.

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

le <object> élément [HTML4 +]

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

le data attribut est requis et peut avoir un valide Type MIME comme une valeur!

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

Note: un truc pour faire usage de la <object> tag de CSS serait de définir un Douane Type Mime valide x-image/x suivi de pas de données (la valeur n'a pas de données après la virgule requise ,)

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

le <SVG> marque

A besoin d'un SVG navigateur compatible et a un <image> élément pour les images raster

le <canvas> élément [HTML5 +].

le width attribut par défaut à 300, et le height attribut par défaut à 150.

le <input> élément avec type="image"

Limites:

... l'élément doit apparaître comme un bouton pour indiquer que l'élément est un bouton.

Chrome suit et rend un carré vide 4x4px en l'absence de texte

Solution partielle, set value=" ":

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

Surveillez également la prochaine <picture> élément dans HTML5.1, actuellement document de travail.


88
2018-03-31 14: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>

20
2017-10-13 08:21



Ils ont raison. IMG est un élément de contenu et CSS concerne le design. Mais qu'en est-il lorsque vous utilisez des éléments de contenu ou des propriétés à des fins de conception? J'ai IMG à travers mes pages Web qui doivent changer si je change le 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. Affectez la propriété "src" de IMG à cette image.
  3. Définir la présentation finale avec "background-image" dans le style CSS.

Il fonctionne comme un charme :)


13
2017-08-11 11:33



J'ai trouvé un meilleur moyen que les solutions proposées, mais il utilise en effet l'image de fond. 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 le nouveau est vu 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 */

}

13
2018-05-25 09: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 une image vectorielle qui a une largeur / hauteur relative (une chose que RobAude répondre ne gère pas)
  (+) est un navigateur croisé (fonctionne également pour IE8 +)
(+) il utilise seulement 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é, ça utilise l'attribut css de fond :)


9
2017-10-01 10:39