CSS sæt billedstile

lær hvordan du bruger CSS til at sætte billedstilarter.

runde billeder

brug border-radius egenskab opretter cirkulære billeder:

Eksempel

runde billeder:

img {
  border-radius: 8px;
}

Try it yourself

Eksempel

cirkulære billeder:

img {
  border-radius: 50%;
}

Try it yourself

miniaturebillede

brug border egenskab opretter en miniature.

Miniature:

Kaffe

Eksempel

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

Try it yourself

som en miniature for et link:

Eksempel

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>

Try it yourself

Responsive billeder

Responsive billeder justerer automatisk sig til skærmsstørrelsen.

Hvis du ønsker at skalere billedet ned efter behov, men undgå at skalere det op til større end originalstørrelsen, tilføj følgende kode:

Eksempel

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

Try it yourself

Tip:på vores CSS RWD tutorial lær mere om responsiv webdesign.

centreret billede

Hvis du ønsker at centere billedet, sæt venstre og højre margin til auto og sæt det som et blokelement:

Kaffe

Eksempel

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

Try it yourself

Polaroid billede / kort

Tulipan

gule tulipaner

Tulipan

røde tulipaner

Eksempel

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;
}

Try it yourself

Gjennomsiktig bilde

opacity egenskapens verdiområde er 0.0 - 1.0. Jo lavere verdien, jo mer gjennomsiktig:

Tulipan

opacity 0.2

Tulipan

opacity 0.5

Tulipan

opacity 1 (standard)

Eksempel

img {
  opacity: 0.5;
}

Try it yourself

Bilde tekst

Hvordan plassere tekst i bildet:

Eksempel

CodeW3C.com Logo
Nederst til venstre
Øverst til venstre
Øverst til høyre
Nederst til høyre
Centreret

Prøv det selv:

Øverst til venstre Øverst til høyre Nederst til venstre Nederst til høyre Sentrert

bildefilter

CSS filter egenskapen legger til visuelle effekter (som suddighet og metning) til elementet.

Bemerk:Internet Explorer eller Edge 12 støtter ikke filter-egenskapen.

Eksempel

Endre alle bilders farger til svart-hvitt (100% grå):

img {
  filter: grayscale(100%);
}

Try it yourself

Tip:Besøk vår CSS-filtreforekomstfor mer informasjon om CSS-filtre.

Bildeoverleggs effekt

Opprett en overleggs effekt ved musepeker over:

Eksempel 1

Fade-in tekst:

Avatar
Hello World

Try it yourself

Eksempel 2

Fade-in boks:

Avatar
Bill

Try it yourself

Eksempel 3

Glid inn opp:

Avatar
Hello World

Try it yourself

Eksempel 4

Glid inn ned:

Avatar
Hello World

Try it yourself

Eksempel 5

Glid inn til venstre:

Avatar
Hello World

Try it yourself

Eksempel 6

Glid inn til høyre:

Avatar
Hello World

Try it yourself

Vend bilde

Flytt musen over bildet:

Sports Park

Eksempel

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

Try it yourself

Responsivt bildebibliotek

Vi kan lage en tilpasset bildebibliotek med CSS.

Dette eksemplet bruker medieforespørsel for å omorganisere bilder ved forskjellige skjermstørrelser. Juster nettleservinduet for å se effekten:

Eksempel

.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 (dialog), and hide it by default.

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

Grøn græsbane

Try it yourself