Una raccolta di possibili metodi per impostare immagini da CSS
Lo :afterpseudo-elemento CSS2 o la sintassi più recente::after di CSS3 insieme alla content:proprietà:
Prima raccomandazione W3C: fogli di stile a cascata, livello 2 Specifica CSS2 12 maggio 1998
Ultima raccomandazione W3C: selettori Livello 3 Raccomandazione W3C 29 settembre 2011
Questo metodo aggiunge il contenuto subito dopo il contenuto dell'albero dei documenti di un elemento.
Nota: alcuni browser eseguono il rendering sperimentale della contentproprietà direttamente su alcuni selettori di elementi ignorando anche l'ultima raccomandazione W3C che definisce:
Si applica a: :beforee :afterpseudo-elementi
Sintassi CSS2 (compatibile con forward):
.myClass:after {
content: url("somepicture.jpg");
}
Selettore CSS3:
.myClass::after {
content: url("somepicture.jpg");
}
Rendering predefinito: Dimensione originale (non dipende dalla dichiarazione di dimensione esplicita)
Questa specifica non definisce completamente l'interazione di: before e: after con elementi sostituiti (come IMG in HTML). Questo sarà definito in modo più dettagliato in una specifica futura.
ma anche al momento della stesura di questo documento, il comportamento con un <IMG>tag non è ancora definito e sebbene possa essere utilizzato in un modo compromesso e non conforme agli standard , l' uso <img>non è raccomandato !
Ottimo metodo candidato, vedi conclusioni ...
CSS1 's
background-image:proprietà:
Prima raccomandazione W3C: fogli di stile a cascata, livello 1 17 dic 1996
Questa proprietà imposta l'immagine di sfondo di un elemento. Quando si imposta un'immagine di sfondo, si dovrebbe anche impostare un colore di sfondo che verrà utilizzato quando l'immagine non è disponibile. Quando l'immagine è disponibile, è sovrapposta al colore di sfondo.
Questa proprietà è in circolazione dall'inizio del CSS e tuttavia merita una menzione gloriosa.
Rendering predefinito: Dimensione originale (non può essere ridimensionato, posizionato solo)
Tuttavia ,
La background-size:proprietà CSS3 è migliorata su di essa consentendo più opzioni di ridimensionamento:
Ultimo stato del W3C: raccomandazione Candidate Background e bordi CSS Modulo livello 3 9 settembre 2014
[length> | <percentage> | auto ]{1,2} | cover | contain
Ma anche con questa proprietà, dipende dalla dimensione del contenitore.
Ancora un buon metodo candidato, vedi conclusioni ...
CSS2 's list-style:proprietà insieme condisplay: list-item :
Prima raccomandazione del W3C: fogli di stile a cascata, specifica CSS2 di livello 2 12 maggio 1998
list-style-image: proprietà imposta l'immagine che verrà utilizzata come marcatore dell'elemento dell'elenco (punto elenco)
Le proprietà dell'elenco descrivono la formattazione visiva di base degli elenchi: consentono ai fogli di stile di specificare il tipo di marcatore ( immagine , glifo o numero)
display: list-item- Questo valore fa sì che un elemento (ad es. <li>In HTML) generi una casella di blocco principale e una casella di marcatura.
.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}
CSS abbreviato: ( <list-style-type> <list-style-position> <list-style-image>)
.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}
Rendering predefinito: Dimensione originale (non dipende dalla dichiarazione di dimensione esplicita)
restrizioni:
L'ereditarietà trasferirà i valori di tipo elenco da elementi OL e UL a elementi LI. Questo è il modo consigliato per specificare le informazioni sullo stile dell'elenco.
Non consentono agli autori di specificare uno stile distinto (colori, caratteri, allineamento , ecc.) Per l'indicatore dell'elenco o di regolarne la posizione
Questo metodo non è adatto anche per il <img>tag poiché la conversione non può essere effettuata tra tipi di elementi, ed ecco l' hack limitato e non conforme che non funziona su Chrome.
Buon metodo candidato, vedi conclusioni ...
CSS3 's border-image:proprietà raccomandazione :
Ultimo stato del W3C: raccomandazione Candidate Background e bordi CSS Modulo livello 3 9 settembre 2014
Un fondo di tipo metodo che si basa sulla specifica formati in modo piuttosto particolare (non definito per questo caso d'uso) e proprietà dei bordi fallback finora (es. border: solid):
Si noti che, anche se non causano mai un meccanismo di scorrimento, le immagini iniziali possono comunque essere ritagliate da un antenato o dal viewport.
Questo esempio illustra l'immagine composta solo come decorazione dell'angolo in basso a destra :
.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
Si applica a: Tutti gli elementi, tranne gli elementi della tabella interna quando border-collapse: collapse
Ancora non si può cambiare un <img>tag 's src(ma qui è un hack ), invece siamo in grado di decorare:
.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"
Buon metodo candidato da considerare dopo la propagazione degli standard.
CSS3 's element()notazione di bozza di lavoro merita una menzione anche:
Nota: la element()funzione riproduce solo l' aspetto dell'elemento di riferimento, non il contenuto effettivo e la sua struttura.
<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">
Useremo i contenuti renderizzati di una delle due immagini nascoste per cambiare lo sfondo dell'immagine in #img1base al Selettore ID tramite CSS:
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
Note: È sperimentale e funziona solo con il -mozprefisso in Firefox e solo su backgroundo background-imageproprietà, necessita anche di dimensioni specificate.
conclusioni
- Qualsiasi contenuto semantico o informazioni strutturali va in HTML.
- Lo stile e le informazioni di presentazione vanno in CSS.
- Ai fini SEO, non nasconderti immagini significative nei CSS.
- La grafica di sfondo è generalmente disabilitata durante la stampa.
- I tag personalizzati possono essere usati e disegnati dai CSS, ma le versioni primitive di Internet Explorer non capiscono] ( IE non ha lo stile dei tag HTML5 (con shiv) ) senza Javascript o guida CSS .
- Le SPA (applicazioni a pagina singola), in base alla progettazione, di solito incorporano immagini in background
Detto questo, esploriamo i tag HTML adatti alla visualizzazione delle immagini:
Il <li> elemento [HTML4.01 +]
Caso d'uso perfetto del list-style-imagecondisplay: list-item metodo .
L' <li>elemento, può essere vuoto, consente il contenuto del flusso ed è persino consentito omettere il </li>tag di fine.
.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>
Limitazioni: difficile da definire ( width:o float:potrebbe aiutare)
L' <figure>elemento [HTML5 +]
L'elemento figure rappresenta un contenuto di flusso, facoltativamente con una didascalia, che è autonomo (come una frase completa) e viene generalmente indicato come una singola unità dal flusso principale del documento.
L'elemento è valido senza contenuto, ma si consiglia di contenere a <figcaption>.
L'elemento può quindi essere utilizzato per annotare illustrazioni, diagrammi, foto , elenchi di codici, ecc.
Rendering predefinito: l'elemento è allineato a destra, con imbottitura sia a destra che a sinistra!
L' <object>elemento [HTML4 +]
Per includere immagini, gli autori possono utilizzare l'elemento OBJECT o l'elemento IMG.
L' dataattributo è obbligatorio e può avere un tipo MIME valido come valore!
<object data="data:x-image/x,"></object>
Nota: un trucco per utilizzare il <object>tag da CSS sarebbe quello di impostare un MimeType personalizzato valido x-image/xseguito da nessun dato (il valore non ha dati dopo la virgola richiesta, )
Rendering predefinito: 300 x 150px, ma le dimensioni possono essere specificate in HTML o CSS.
Ha bisogno di un browser compatibile con SVG e ha un <image>elemento per le immagini raster
L' <canvas>elemento [HTML5 +].
L' widthattributo predefinito è 300 e l' heightattributo predefinito 150 .
Il <input> elemento contype="image"
limitazioni:
... l'elemento dovrebbe apparire come un pulsante per indicare che l'elemento è un pulsante.
che Chrome segue e rende un quadrato vuoto 4x4px quando non c'è testo
Soluzione parziale, impostare value=" ":
<input type="image" id="img1" value=" ">
Fai anche attenzione al prossimo <picture>elemento in HTML5.1 , attualmente una bozza funzionante .