CSS ustawianie stylów obrazów

Naucz się, jak używać CSS do ustawiania stylów obrazów.

Zaokrąglone obrazy

używając border-radius właściwości tworzą zaokrąglone obrazy:

Przykład

Zaokrąglone obrazy:

img {
  border-radius: 8px;
}

Spróbuj Sam

Przykład

Kolisty obraz:

img {
  border-radius: 50%;
}

Spróbuj Sam

miniatury obrazu

używając border właściwości tworzą miniatury.

Miniatura:

Kawa

Przykład

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

Spróbuj Sam

jako miniaturę linku:

Przykład

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>

Spróbuj Sam

Responsywne obrazy

Responsywne obrazy automatycznie dostosowują się do rozmiaru ekranu.

Jeśli chcesz zmniejszać obraz na żądanie, ale zapobiegać jego powiększaniu do większego niż oryginalny rozmiar, dodaj następujący kod:

Przykład

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

Spróbuj Sam

Wskazówka:W naszej Tutorial CSS RWD Dowiedz się więcej o responsywnym projektowaniu stron internetowych.

Wyśrodkowany obraz

Aby wyśrodkować obraz, ustaw lewe i prawe marginesy zewnętrzne na: auto i ustaw jako element blokowy:

Kawa

Przykład

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

Spróbuj Sam

Fotografia Polaroid / Karta

Lilia

Żółte lilie

Lilia

Czerwone lilie

Przykład

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

Spróbuj Sam

Przezroczysty obraz

opacity Wartość atrybutu wynosi od 0.0 do 1.0. Im niższa wartość, tym bardziej przezroczysty:

Lilia

opacity 0.2

Lilia

opacity 0.5

Lilia

opacity 1 (domyślnie)

Przykład

img {
  opacity: 0.5;
}

Spróbuj Sam

Tekst w obrazie

Jak umieścić tekst w obrazie:

Przykład

Logo CodeW3C.com
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Spróbuj sam:

Górny lewy Górny prawy Dolny lewy Dolny prawy Środek

Filtr obrazu

CSS filter Atrybuty dodają efekty wizualne (takie jak rozmycie i nasycenie) do elementów.

Uwaga:Internet Explorer lub Edge 12 nie obsługuje atrybutu filter.

Przykład

Zmień kolor wszystkich obrazów na czarno-biały (100% szarość):

img {
  filter: grayscale(100%);
}

Spróbuj Sam

Wskazówka:Odwiedź naszą Przeglądarka CSS Reference ManualDowiedz się więcej o filtrach CSS.

Nadkładanie obrazu przy najechaniu

Utwórz efekt nadkładania przy najechaniu myszą:

Przykład 1

Wstępne rozjaśnienie tekstu:

Avatar
Hello World

Spróbuj Sam

Przykład 2

Efekt wstępnego rozjaśnienia:

Avatar
Bill

Spróbuj Sam

Przykład 3

W górę (slide in):

Avatar
Hello World

Spróbuj Sam

Przykład 4

W dół (slide in):

Avatar
Hello World

Spróbuj Sam

Przykład 5

W lewo (slide in):

Avatar
Hello World

Spróbuj Sam

Przykład 6

W prawo (slide in):

Avatar
Hello World

Spróbuj Sam

Odwróć obraz

Przenieś mysz na obraz:

Park sportowy

Przykład

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

Spróbuj Sam

Responsywna biblioteka obrazów

Możemy użyć CSS do tworzenia dostosowalnych bibliotek obrazów.

W tym przykładzie używamy zapytań mediowych do przestawiania obrazów w różnych rozmiarach ekranu. Zmniejsz rozmiar okna przeglądarki, aby zobaczyć efekty:

Przykład

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

Spróbuj Sam

Wskazówka:Proszę, odwiedź nasze Tutorial CSS RWD Dowiedz się więcej o projektowaniu stron responsywnych.

Okno modalne (Image Modal)

To jest przykład, jak CSS i JavaScript współpracują ze sobą.

Najpierw użyj CSS do utworzenia okna modalnego (okna dialogowego) i domyślnie ukryj je.

Następnie, gdy użytkownik kliknie obraz, wyświetl okno modalne za pomocą JavaScript i wyświetl obraz wewnątrz modalnego:

Pole do piłki nożnej

Spróbuj Sam