Pozycja tła - CSS-Tricks

Anonim

background-positionNieruchomość w CSS pozwala na przesuwanie obrazu tła (lub gradient) wokół jego kontenerze.

html ( background-position: 100px 5px; )

Ma trzy różne typy wartości:

  • Wartości długości (np. 100px 5px)
  • Procenty (np. 100% 5%)
  • Słowa kluczowe (np. top right)

Domyślne wartości to 0 0. Spowoduje to umieszczenie obrazu tła w lewym górnym rogu kontenera.

Wartości długości są dość proste: pierwsza wartość to pozycja pozioma, druga wartość to pozycja pionowa. Więc 100px 5pxprzesunie obraz 100px w prawo i pięć pikseli w dół. Możesz ustawić wartości długości w px, emlub dowolne inne wartości długości CSS.

Odsetki działają trochę inaczej. Wyciągnij czapki matematyczne: przesunięcie obrazu tła o X% oznacza wyrównanie punktu X% obrazu do punktu X% w kontenerze. Na przykład 50%oznacza, że ​​wyrówna środek obrazu ze środkiem kontenera. 100%oznacza, że ​​wyrówna ostatni piksel obrazu z ostatnim pikselem kontenera i tak dalej.

Słowa kluczowe to tylko skróty do procentów. Jest to łatwiejsze do zapamiętania i zapisu top rightniż 100% 0i dlatego kluczowe są rzeczą. Oto lista wszystkich pięciu słów kluczowych i ich odpowiedników:

  • top: 0% w pionie
  • right: 100% w poziomie
  • bottom: 100% w pionie
  • left: 0% w poziomie
  • center: 50% w poziomie, jeśli poziomo nie jest jeszcze zdefiniowane. Jeśli tak, to jest to stosowane pionowo.

Warto zauważyć, że nie ma znaczenia, jakiej kolejności używasz dla słów kluczowych: top centerjest taka sama jak center top. Możesz to jednak zrobić tylko wtedy, gdy używasz wyłącznie słów kluczowych. center 10%to nie to samo co 10% center.

Próbny

To demo pokazuje przykłady background-positionzestawów z jednostkami długości, wartościami procentowymi i słowami kluczowymi.

Zobacz wartości Pen background-position by CSS-Tricks (@ css-tricks) w CodePen.

Deklarowanie wartości

W background-positionnowoczesnych przeglądarkach można podać maksymalnie cztery wartości (szczegółowe informacje można znaleźć w tabeli Obsługa przeglądarek).

Jeśli zadeklarujesz jedną wartość , będzie to przesunięcie w poziomie. Przeglądarka ustawia odsunięcie pionowe na center.

Gdy deklarujesz dwie wartości , pierwsza wartość to przesunięcie w poziomie, a druga to przesunięcie w pionie.

Sprawy stają się nieco trudniejsze, gdy zaczniesz używać trzech lub czterech wartości, ale zyskujesz także większą kontrolę nad umieszczeniem w tle.

Składnia składająca się z trzech lub czterech wartości zmienia się między słowami kluczowymi a długością lub jednostkami procentowymi. Możesz użyć dowolnej wartości słowa kluczowego z wyjątkiem deklaracji centero trzech lub czterech wartościach background-position.

Po określeniu trzech wartości przeglądarka interpretuje „brakującą” czwartą wartość jako 0. Oto przykład wartości z trzema wartościami background-position:

#threevalues ( background-position: right 45px bottom; )

Spowoduje to ustawienie obrazu tła o 45 pikseli od prawej strony i 0 pikseli od dołu kontenera.

Oto przykład czterowartościowej background-position :

#fourvalues ( background-position: right 45px bottom 20px; )

Spowoduje to umieszczenie obrazu tła 45 pikseli od prawej strony i 20 pikseli od dołu kontenera.

Zwróć uwagę na kolejność wartości w powyższych przykładach: słowa kluczowe, po których następują jednostki długości. Trzy- lub cztery wartości background-positionmuszą mieć taki format, ze słowem kluczowym poprzedzającym długość lub jednostkę procentową.

Próbny

To demo zawiera przykłady jednej wartości, dwóch wartości, trzech wartości i czterech wartości background-position.

Zobacz składnię wartości Pen background-position 1, 2, 3 i 4 w CSS-Tricks (@ css-tricks) w CodePen.

Związane z

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

Więcej zasobów

  • background-position w specyfikacji CSS3
  • background-position w MDN
  • Przesunięcie obrazów tła

Wsparcie przeglądarki

Podstawowe wartości są obsługiwane wszędzie. Składnia czterowartościowa obsługuje to:

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
25 13 9 12 7

Telefon komórkowy / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4 7.0-7.1

To ten sam poziom wsparcia co właściwości background-position-xi background-position-y.