immagine CSS
Questo capitolo mostra come immagine di layout CSS da usare.
Foto filetto
Miniature
Usiamo il border di proprietà per creare miniature.
Esempi
border: 1px #ddd solido;
border-radius: 4px;
padding: 5px;
}
<Img src = "paris.jpg" alt = "Paris">
Prova »
Esempi
display: inline-block;
border: 1px #ddd solido;
border-radius: 4px;
padding: 5px;
transizione: 0.3s;
}
a: hover {
box-shadow: 0 0 1px 2px RGBA
(0, 140, 186, 0.5);
}
<A Href = "paris.jpg">
<Img src = "paris.jpg" alt = "Paris">
</ A>
Prova »
immagine responsive
immagine Responsive si adatta automaticamente una varietà di dimensioni dello schermo.
Esempio, è possibile reimpostare il browser per vedere la dimensione dell'effetto:
Se è necessario la libertà di scalare l'immagine, e l'immagine per ingrandire la dimensione del non superiore al valore massimo di quella originale, è possibile utilizzare il seguente codice:
Suggerimento: il contenuto Web può essere più reattivi di riferimento di progettazione CSS tutorial responsive design .
immagine Testo
Come individuare il testo dell'immagine:
Esempi
Prova:
L'angolo in alto a sinistra >> nell'angolo superiore destro » nell'angolo in basso a sinistra» in basso a destra >> Centro >>Card-immagine
Esempi
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 RGBA (0, 0, 0, 0.2), 0 6px 20px 0 RGBA (0, 0, 0, 0,19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
Prova »
Filtri immagine
Il CSS filter attributo per aggiungere elementi con effetti visivi (ad esempio: Fuzzy e saturazione).
Nota: Internet Explorer o Safari 5.1 (e precedenti) non supporta questa proprietà.
Esempi
Modifica tutti i colori alle immagini in bianco e nero (100% grigio):
-webkit-filtro: in scala di grigi (100% ); / * Chrome, Safari, Opera * /
Filtro: in scala di grigi (100%);
}
Prova »
Suggerimento: Visita il CSS Manuale del filtro di riferimento per i più contenuti.
Responsive Galleria di immagini
Esempi
padding: 0 6px;
float: left;
Larghezza: 24,99,999 mila%;
}
@media solo schermo e (max-width : 700px) {
.responsive {
Larghezza: 49,99,999 mila%;
margin: 0 6px;
}
}
@media solo schermo e (max-width : 500px) {
.responsive {
width: 100%;
}
}
Prova »
Immagini modale (modal)
Questo esempio dimostra come combinare insieme CSS e JavaScript per rendere l'immagine.
In primo luogo, usiamo i CSS per creare una finestra modale (dialogo), è nascosta per impostazione predefinita.
Abbiamo quindi utilizzare JavaScript per visualizzare una finestra modale quando si clicca, l'immagine verrà visualizzata in una finestra pop-up:
Esempi
var modal = document.getElementById ( 'myModal' );
// Ottenere la modalità cornice, immagine alt attributi, come descritto nel presente pop cinese
var img = document.getElementById ( 'myImg' );
var modalImg = document.getElementById ( "img01" );
var CaptionText = document.getElementById ( "voce" );
img.onclick = function () {
modal.style.display = "blocco";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Prendi il <span> che chiude il modal
var = arco document.getElementsByClassName ( "close" ) [0];
// Quando l'utente fa clic su <span > (x), chiudere il modal
span.onclick = function () {
modal.style.display = "none";
}
Prova »