Background-image - CSS-Tricks

Anonim

background-imageNieruchomość w CSS stosuje grafikę (np PNG, SVG, JPG.webp, GIF, webp) lub gradient do tła elementu.

Istnieją dwa różne typy obrazów, które można dołączyć za pomocą CSS: zwykłe obrazy i gradienty.

Zdjęcia

Używanie obrazu na tle jest dość proste:

body ( background: url(sweettexture.jpg.webp); )

url()Wartość pozwala zapewnić ścieżkę do każdego obrazu, a pokaże się jako tło dla tego elementu.

Możesz również ustawić identyfikator URI danych dla url(). To wygląda tak:

body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )

Ta technika usuwa jedno żądanie HTTP, co jest dobrą rzeczą. Istnieje jednak wiele wad, więc zanim zaczniesz zastępować wszystkie obrazy, upewnij się, że bierzesz pod uwagę wszystkie zalety i wady identyfikatorów URI danych.

Możesz również użyć background-imagedo sprite obrazów, co jest kolejną przydatną metodą zmniejszania żądań HTTP.

Gradienty

Inną opcją podczas korzystania z tła jest polecenie przeglądarce utworzenia gradientu. Oto prosty przykład gradientu liniowego super-duper:

body ( background: linear-gradient(black, white); )

Możesz także użyć gradientów radialnych:

body ( background: radial-gradient(circle, black, white); )

Technicznie rzecz biorąc, gradienty to tylko inna forma obrazu tła. Różnica polega na tym, że przeglądarka tworzy obraz za Ciebie. Oto jak je zapisać: Składnia gradientu CSS3

W powyższym przykładzie użyto tylko jednego gradientu, ale można też nakładać na siebie wiele gradientów. Jest kilka niesamowitych wzorów, które możesz stworzyć za pomocą tej techniki.

Ustawianie koloru zastępczego

Jeśli obraz tła nie ładuje się lub tło gradientowe jest wyświetlane w przeglądarce, która nie obsługuje gradientów, przeglądarka będzie szukać koloru tła jako zastępczego. Możesz określić kolor zastępczy w następujący sposób:

body ( background: url(sweettexture.jpg.webp) blue; )

Wiele obrazów tła

Jako tło możesz użyć wielu obrazów lub kombinacji obrazów i gradientów. Wiele obrazów tła jest teraz dobrze obsługiwanych (wszystkie nowoczesne przeglądarki i IE9 + dla obrazów graficznych, IE10 + dla gradientów).

Jeśli używasz wielu obrazów tła, pamiętaj, że istnieje nieco sprzeczna z intuicją kolejność układania. Wypisz obraz, który powinien znajdować się jako pierwszy, a ten, który powinien znajdować się na końcu z tyłu, na przykład:

body ( background: url(logo.png.webp), url(background-pattern.png.webp); )

Jeśli używasz wielu obrazów tła, często musisz ustawić więcej wartości dla tła, aby wszystko znalazło się we właściwym miejscu. Jeśli chcesz użyć backgroundskrótu, możesz ustawić wartości dla każdego obrazu osobno. Twój skrót będzie wyglądał mniej więcej tak (zwróć uwagę na przecinek oddzielający pierwszy obraz i jego wartości od drugiego obrazu i jego wartości):

body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )

Nie ma ograniczeń co do liczby obrazów tła, które możesz ustawić, i możesz robić fajne rzeczy, takie jak animowanie obrazów tła. Na blogu Davida Walsha znajduje się dobry przykład wielu obrazów tła z animacją.

Próbny

Zobacz obraz tła pióra autorstwa CSS-Tricks (@ css-tricks) na CodePen.

Związane z

  • załącznik w tle
  • background-clip
  • kolor tła
  • pochodzenie tła
  • pozycja tła
  • powtarzanie tła
  • background-size

Więcej zasobów

  • Specyfikacja CSS3
  • MDN
  • Doskonałe obrazy tła na całej stronie
  • Opanowanie gradientów CSS (Slidedeck)

Wsparcie przeglądarki

Zwykłe obrazy działają wszędzie, a wiele obrazów działa w nowoczesnych przeglądarkach i IE9 +. Oto wsparcie dla gradientów:

Chrom Safari Firefox Opera TO ZNACZY Android iOS
10+ 5.1+ 3.6+ 12.1+ 10+ 4+ 5.1+