CSS imposta lo stile delle immagini

Impara come usare CSS per impostare lo stile delle immagini.

Immagine arrotondata

usare raggio-angolo proprietà per creare immagini arrotondate:

Esempio

Immagine arrotondata:

img {
  raggio-angolo: 8px;
}

Try It Yourself

Esempio

Immagine circolare:

img {
  raggio-angolo: 50%;
}

Try It Yourself

immagine miniature

usare bordo proprietà per creare miniature.

Miniatura:

Coffee

Esempio

img {
  bordo: 1px solid #ddd;
  raggio-angolo: 4px;
  riempimento: 5px;
  larghezza: 150px;
}
<img src="paris.jpg" alt="Paris">

Try It Yourself

come miniature dei collegamenti:

Esempio

img {
  bordo: 1px solid #ddd;
  raggio-angolo: 4px;
  riempimento: 5px;
  larghezza: 150px;
}
img:hover {
ombra: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

Try It Yourself

Immagini responsive

Le immagini responsive si adatteranno automaticamente alle dimensioni dello schermo.

Se desideri ridurre l'immagine su richiesta ma evitare di ingrandirla oltre le dimensioni originali, aggiungi il seguente codice:

Esempio

img {
  larghezza-massima: 100%;
  altezza: auto;
}

Try It Yourself

Tip:Nel nostro CSS RWD Tutorial Impara di più sulla progettazione web responsive.

Centra immagine

Per centrare l'immagine, impostare i margini esterni laterali a auto e impostalo come elemento bloccante:

Coffee

Esempio

img {
  display: block;
  margine-sinistro: auto;
  margine-destra: auto;
  larghezza: 50%;
}

Try It Yourself

Immagine Polaroid / scheda

Tulip

Tulipano giallo

Tulip

Tulipano rosso

Esempio

div.polaroid {
  larghezza: 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;
}

Try It Yourself

Immagine trasparente

opacity Il valore dell'attributo è compreso tra 0.0 e 1.0. Più basso è il valore, più trasparente è l'immagine:

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1 (predefinito)

Esempio

img {
  opacity: 0.5;
}

Try It Yourself

Testo dell'immagine

Come posizionare il testo all'interno dell'immagine:

Esempio

CodeW3C.com Logo
In basso a sinistra
In alto a sinistra
In alto a destra
In basso a destra
Centrato

Prova personalmente:

In alto a sinistra In alto a destra In basso a sinistra In basso a destra Centrato

Filtri di immagine

CSS filter L'attributo aggiunge effetti visivi (come sfocatura e saturazione) agli elementi.

Attenzione:Internet Explorer o Edge 12 non supportano l'attributo filter.

Esempio

Cambia il colore di tutte le immagini in bianco e nero (100% grigio):

img {
  filter: grayscale(100%);
}

Try It Yourself

Tip:Visita il nostro Manuale di riferimento dei filtri CSS，per ulteriori informazioni sui filtri CSS.

Sovrapposizione di immagine

Creazione di un effetto sovrapposto quando il mouse si posiziona sopra l'immagine:

Esempio 1

Testo di dissolvenza:

Avatar
Hello World

Try It Yourself

Esempio 2

Finestra di dissolvenza:

Avatar
Bill

Try It Yourself

Esempio 3

Ingresso (alto):

Avatar
Hello World

Try It Yourself

Esempio 4

Ingresso (basso):

Avatar
Hello World

Try It Yourself

Esempio 5

Ingresso (sinistra):

Avatar
Hello World

Try It Yourself

Esempio 6

Ingresso (destra):

Avatar
Hello World

Try It Yourself

Capovolgimento dell'immagine

Muovi il mouse sull'immagine:

体育公园

Esempio

img:hover {
  transform: scaleX(-1);
}

Try It Yourself

Galleria di immagini responsive

Possiamo creare una galleria di immagini adattabile utilizzando CSS.

Questo esempio utilizza le query media per riorganizzare le immagini su schermi di diverse dimensioni. Modifica la dimensione della 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%;
  }
}

Try It Yourself

Tip:Please visit our CSS RWD Tutorial Learn more about responsive web design.

Image Modal (Image Modal)

This is an example of how CSS and JavaScript work together.

First, please use CSS to create a modal window (dialogue box) and hide it by default.

Then, when the user clicks on the image, use JavaScript to display a modal window and show the image inside the modal:

绿茵场

Try It Yourself