Latar belakang-kedudukan - Trik CSS

Anonim

The background-positionharta di CSS membolehkan anda untuk bergerak imej latar belakang (atau kecerunan) di sekitar dalam bekasnya.

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

Ia mempunyai tiga jenis nilai:

  • Nilai panjang (contohnya 100px 5px)
  • Peratusan (contohnya 100% 5%)
  • Kata kunci (contohnya top right)

Nilai lalai adalah 0 0. Ini meletakkan gambar latar anda di kiri atas bekas.

Nilai panjang cukup sederhana: nilai pertama adalah kedudukan mendatar, nilai kedua adalah kedudukan menegak. Jadi 100px 5pxakan memindahkan gambar 100px ke kanan dan lima piksel ke bawah. Anda boleh menetapkan nilai panjang dalam px, ematau mana-mana daripada nilai panjang CSS lain.

Peratusan bekerja sedikit berbeza. Dapatkan topi matematik anda: memindahkan gambar latar dengan X% bermaksud ia akan menjajarkan titik X% dalam gambar ke titik X% di dalam bekas. Sebagai contoh, 50%bermaksud ia akan menjajarkan bahagian tengah gambar dengan tengah bekas. 100%bermaksud ia akan menyelaraskan piksel terakhir gambar dengan piksel terakhir bekas, dan sebagainya.

Kata kunci hanyalah jalan pintas untuk peratusan. Lebih mudah diingat dan ditulis top rightdaripada 100% 0, dan itulah sebabnya kata kunci adalah satu perkara. Berikut adalah senarai kelima-lima kata kunci dan nilainya yang setara:

  • top: 0% secara menegak
  • right: 100% melintang
  • bottom: 100% secara menegak
  • left: 0% melintang
  • center: 50% melintang jika mendatar belum ditentukan. Sekiranya berlaku maka ini digunakan secara menegak.

Sangat menarik untuk diperhatikan bahawa tidak kira pesanan yang anda gunakan untuk kata kunci: top centersama dengan center top. Anda hanya dapat melakukannya jika menggunakan kata kunci secara eksklusif. center 10%tidak sama dengan 10% center.

Demo

Demo ini menunjukkan contoh background-positionset dengan unit panjang, peratusan, dan kata kunci.

Lihat nilai kedudukan latar belakang Pen oleh CSS-Tricks (@ css-tricks) di CodePen.

Menyatakan Nilai

Anda boleh memberikan background-positionhingga empat nilai dalam penyemak imbas moden (lihat jadual Sokongan Penyemak Imbas untuk perinciannya).

Sekiranya anda menyatakan satu nilai , nilai itu adalah ofset mendatar. Penyemak imbas menetapkan offset menegak ke center.

Apabila anda menyatakan dua nilai , nilai pertama adalah ofset mendatar dan nilai kedua adalah ofset menegak.

Perkara menjadi sedikit sukar apabila anda mula menggunakan tiga atau empat nilai, tetapi anda juga dapat mengawal lebih banyak penempatan latar belakang anda.

Sintaks tiga atau empat nilai bergantian antara kata kunci dan unit panjang atau peratusan. Anda boleh menggunakan mana-mana nilai kata kunci kecuali centerdalam background-positionpengisytiharan tiga atau empat nilai .

Apabila anda menentukan tiga nilai , penyemak imbas menafsirkan nilai keempat "hilang" sebagai 0. Berikut adalah contoh nilai tiga background-position:

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

Ini meletakkan gambar latar 45px dari kanan dan 0px dari bahagian bawah bekas.

Inilah contoh nilai empat background-position :

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

Ini meletakkan gambar latar 45px dari kanan dan 20px dari bahagian bawah bekas.

Perhatikan urutan nilai dalam contoh di atas: kata kunci diikuti oleh unit panjang. Nilai tiga atau empat background-positionmesti mengikut format itu, dengan kata kunci yang mendahului unit panjang atau peratusan.

Demo

Demo ini merangkumi contoh satu nilai, dua nilai, tiga nilai, dan empat nilai background-position.

Lihat sintaks nilai Latar belakang-kedudukan 1, 2, 3, dan 4 oleh CSS-Tricks (@ css-tricks) di CodePen.

Berkaitan

  • latar belakang-lampiran
  • latar-klip
  • warna latar belakang
  • gambar latar belakang
  • latar-asal
  • latar belakang-ulangan
  • ukuran latar belakang

Lebih Banyak Sumber

  • background-position dalam spesifikasi CSS3
  • background-position di MDN
  • Imej Latar Belakang Offset

Sokongan Penyemak Imbas

Nilai asas disokong di mana sahaja. Sintaks empat nilai mempunyai sokongan ini:

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
25 13 9 12 7

Mudah Alih / Tablet

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

Itu tahap sokongan yang sama dengan background-position-xdan background-position-ysifat.