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:
.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.
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
- Tout contenu sémantique ou information structurelle est en HTML.
- Les informations de style et de présentation vont en CSS.
- À des fins de référencement, ne cachez pas d' images significatives en CSS.
- Les graphiques d'arrière-plan sont généralement désactivés lors de l'impression.
- 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 .
- 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.
.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)
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.
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 .