CSS afbeeldingsstijlen instellen

Leer hoe je CSS gebruikt om afbeeldingsstijlen in te stellen.

Afgeronde afbeeldingen

gebruik border-radius eigenschappen om ronde afbeeldingen te maken:

Voorbeeld

Afgeronde afbeeldingen:

img {
  border-radius: 8px;
}

Probeer het zelf

Voorbeeld

Ronde afbeeldingen:

img {
  border-radius: 50%;
}

Probeer het zelf

miniatuurafbeelding

gebruik border eigenschappen om een miniatuur te maken.

Miniatuur:

Koffie

Voorbeeld

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

Probeer het zelf

als miniatuur van de link:

Voorbeeld

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

Probeer het zelf

Responsieve afbeeldingen

Responsieve afbeeldingen passen zich automatisch aan op het schermformaat aan.

Als je de afbeelding wilt verkleinen naar beneden, maar niet wilt dat hij groter wordt dan de oorspronkelijke maat, voeg dan de volgende code toe:

Voorbeeld

img {
  max-width: 100%;
  height: auto;
}

Probeer het zelf

Tip:In onze CSS RWD Handleiding Leer meer over responsieve webontwerp.

Centreer de afbeelding

Als je de afbeelding wilt centreren, stel dan de linker en rechter marges in op auto en maak het een blokelement:

Koffie

Voorbeeld

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Probeer het zelf

Polaroid foto / kaart

Tulp

Gele tulpen

Tulp

Rode tulpen

Voorbeeld

div.polaroid {
  width: 80%;
  background-color: white;
  schaduw: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {breedte: 100%}
div.container {
  tekst-uitlijning: center;
  afstand: 10px 20px;
}

Probeer het zelf

Transparante afbeeldingen

doorzichtigheid De waarde van de eigenschap ligt tussen 0.0 en 1.0. Hoe lager de waarde, hoe transparenter het is:

Tulp

doorzichtigheid 0.2

Tulp

doorzichtigheid 0.5

Tulp

doorzichtigheid 1 (standaard)

Voorbeeld

img {
  doorzichtigheid: 0.5;
}

Probeer het zelf

Afbeeldingstekst

Hoe tekst te positioneren in een afbeelding:

Voorbeeld

CodeW3C.com Logo
Onder Links
Boven Links
Boven Rechts
Onder Rechts
Gecentreerd

Probeer het zelf uit:

Links boven Rechts boven Links onder Rechts onder Centraal

Afbeeldingsfilter

CSS filter De eigenschap voegt visuele effecten (zoals vervaging en verzadiging) toe aan elementen.

Opmerking:Internet Explorer of Edge 12 ondersteunt de filter eigenschap niet.

Voorbeeld

Maak alle afbeeldingen zwart-wit (100% grijs):

img {
  filter: grijs(100%);
}

Probeer het zelf

Tip:Bezoek onze CSS Filter Referentiemanual，voor meer informatie over CSS filters.

Beeld hover opzet

Maak een opzet effect bij mouse hover:

Voorbeeld 1

Verzachten van de tekst:

Avatar
Hallo Wereld

Probeer het zelf

Voorbeeld 2

Verzachten van het vak:

Avatar
Bill

Probeer het zelf

Voorbeeld 3

Invoegen (boven):

Avatar
Hallo Wereld

Probeer het zelf

Voorbeeld 4

Invoegen (onder):

Avatar
Hallo Wereld

Probeer het zelf

Voorbeeld 5

Invoegen (links):

Avatar
Hallo Wereld

Probeer het zelf

Voorbeeld 6

Invoegen (rechts):

Avatar
Hallo Wereld

Probeer het zelf

Beeld omkeren

Verplaats de muis naar het beeld:

Sportpark

Voorbeeld

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

Probeer het zelf

Responsieve afbeeldingsgalerij

We kunnen met CSS een aanpasbare afbeeldingsgalerij maken.

Deze voorbeeld gebruikt media queries om afbeeldingen op verschillende schermgrootte te herindelen. Pas de grootte van het browservenster aan om het effect te zien:

Voorbeeld

.responsive {}}
  afstand: 0 6px;
  float: links;
  breedte: 24.99999%;
}
@media only screen and (max-width: 700px){
  .responsive {}}
    breedte: 49.99999%;
    marge: 6px 0;
  }
}
@media only screen and (max-width: 500px){
  .responsive {}}
    width: 100%;
  }
}

Probeer het zelf

Tip:Bezoek onze CSS RWD Handleiding Leer meer over responsieve Webontwerp in dit.

Afbeeldingsmodaal (Image Modal)

Dit is een voorbeeld van hoe CSS en JavaScript samenwerken.

Eerst, maak een modaal venster (dialoogvenster) met behulp van CSS en houd het standaard verborgen.

Vervolgens, wanneer de gebruiker op het beeld klikt, wordt een modaal venster weergegeven met behulp van JavaScript en wordt het beeld binnenin het modaal venster weergegeven:

Groene grasveld

Probeer het zelf