CSS ställa in bildstilar

lär dig hur du använder CSS för att ställa in bildstilar.

runda bilder

använd border-radius egenskapen skapar en rund bild:

Exempel

rund bild:

img {
  border-radius: 8px;
}

Try It Yourself

Exempel

cirkulär bild:

img {
  border-radius: 50%;
}

Try It Yourself

miniaturbild

använd border egenskapen skapar en miniatur.

Miniatur:

Kaffe

Exempel

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

Try It Yourself

som länkminiatur:

Exempel

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

Responsiva bilder

Responsiva bilder justeras automatiskt för att passa skärmstorleken.

Om du vill kunna缩小图像但不想放大超过原始尺寸，låt detta kod adderas:

Exempel

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

Try It Yourself

Tip:i vår CSS RWD Tutorial lär dig mer om responsiv webbdesign.

centrera bild

Om du vill centrera bilden, sätt vänster och höger marginaler till auto och sätt det som en block-element:

Kaffe

Exempel

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

Try It Yourself

Polaroid bild / kort

Tulpan

gul tulipa

Tulpan

röd tulipa

Exempel

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

Genomskinliga bilder

opacity Egenskapens värdeomfattning är 0.0 - 1.0. Ju lägre värdet, desto mer genomskinlig:

Tulpan

opacity 0.2

Tulpan

opacity 0.5

Tulpan

opacity 1 (standard)

Exempel

img {
  opacity: 0.5;
}

Try It Yourself

Bildeffekter

Hur man lägger till text till en bild:

Exempel

CodeW3C.com Logotyp
Nederst till vänster
Överst till vänster
Överst till höger
Nederst till höger
Centrerad

Prova själv:

Överst till vänster Överst till höger Nederst till vänster Nederst till höger Centrerad

Bildeffekter

CSS filter Egenskapen lägger till visuella effekter (som suddighet och saturation) till element.

Observera:Internet Explorer eller Edge 12 stöder inte filter-attributet.

Exempel

Ändra alla bilders färger till svart-vitt (100% grått):

img {
  filter: grayscale(100%);
}

Try It Yourself

Tip:Besök vår CSS-filtreferenshandbokFör mer information om CSS-filtre.

Bildeffekt vid muspekarens överdragning

Skapa en överlappningseffekt vid muspekarens överdragning:

Exempel 1

Inbäddad text:

Avatar
Hej Världen

Try It Yourself

Exempel 2

Inbäddad ram:

Avatar
Bill

Try It Yourself

Exempel 3

Glid in (uppe):

Avatar
Hej Världen

Try It Yourself

Exempel 4

Glid in (ner):

Avatar
Hej Världen

Try It Yourself

Exempel 5

Glid in (vänster):

Avatar
Hej Världen

Try It Yourself

Exempel 6

Glid in (höger):

Avatar
Hej Världen

Try It Yourself

Vänd bilden

Flytta muspekaren över bilden:

Sportsparken

Exempel

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

Try It Yourself

Responsivt bildgalleri

Vi kan använda CSS för att skapa en anpassningsbar bildgalleri.

Detta exempel använder media queries för att omorganisera bilder för olika skärmstorlekar. Justera storleken på webbläsarfönstret för att se effekten:

Exempel

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px){
  .responsive {
    width: 49.99999%;
    margn: 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 here.

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 on the image, use JavaScript to display a modal window and show the image inside the modal:

Gräsplan

Try It Yourself