Ulteriori informazioni su come stile di immagini usando i CSS.
Immagini arrotondati
Utilizzare il border-radius proprietà per creare immagini arrotondati:
Le immagini in miniatura
Utilizzare il border di proprietà per creare immagini in miniatura.
Immagine in miniatura:
Esempio
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
< img src="paris.jpg"
alt="Paris" > Prova tu stesso " Immagine miniatura come Link:
Esempio
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0
0 2px 1px rgba
(0, 140, 186, 0.5);
}
< a href="paris.jpg" >
< img src="paris.jpg" alt="Paris" >
< /a > Prova tu stesso " Immagini responsive
immagini Responsive si regola automaticamente per adattarsi alle dimensioni dello schermo.
Ridimensionare la finestra del browser per vedere l'effetto:
Se si desidera un'immagine in scala verso il basso se deve, ma mai di scalare fino a essere più grande della sua dimensione originale, aggiungere il seguente:
Tip: Per saperne di più Responsive Web Design nel nostro CSS RWD Tutorial .
immagine Testo
Come posizionare il testo in un'immagine:
Esempio
Prova tu stesso:
In alto a sinistra » In alto a destra» In basso a sinistra » In basso a destra» Centrato »Polaroid Immagini / Cards
La lingua del Troll di Hardanger, Norvegia
Northern Lights in Norvegia
Esempio
div.polaroid {
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 tu stesso " Filtri immagine
Il CSS filter struttura aggiunge effetti visivi (come sfocatura e saturazione) a un elemento.
Nota: La proprietà del filtro non è supportata in Internet Explorer, Riva 12, o Safari 5.1 e versioni precedenti.
Esempio
Cambiare il colore di tutte le immagini in bianco e nero (100% di grigio):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}Suggerimento: Vai al nostro filtro CSS di riferimento per ulteriori informazioni sui filtri CSS.
Responsive Galleria di immagini
CSS può essere usato per creare gallerie di immagini. In questo esempio utilizzare le media query per ri-organizzare le immagini in diverse dimensioni dello schermo. Ridimensionare la finestra del browser per vedere l'effetto:
Esempio
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and
(max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px
0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
} Prova tu stesso " Tip: Per saperne di più Responsive Web Design nel nostro CSS RWD Tutorial .
Immagine modale (Advanced)
Questo è un esempio per dimostrare come CSS e JavaScript possono lavorare insieme.
In primo luogo, usare i CSS per creare una finestra modale (finestra di dialogo), e nascondere di default.
Quindi, utilizzare un JavaScript per visualizzare la finestra modale e per visualizzare l'immagine all'interno del modal, quando un utente fa clic sull'immagine:
Esempio
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it
inside the modal - use its "alt" text as a caption
var img =
document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick =
function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span =
document.getElementsByClassName("close")[0];
// When the user clicks
on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
} Prova tu stesso "