Latar belakang-ulangan - Trik CSS

Anonim

Sekiranya background-imageharta tanah ditentukan, background-repeatharta dalam CSS menentukan apakah (dan bagaimana) ia akan berulang. Inilah contohnya:

html ( background-image: url(logo.png.webp); background-repeat: repeat-x; )

Ini adalah nilai yang mungkin untuk harta tanah ini (selain perkara biasa seperti inherit):

  • repeat: jubin gambar ke dua arah. Ini adalah nilai lalai.
  • repeat-x: jubin gambar secara melintang
  • repeat-y: jubin gambar secara menegak
  • no-repeat: jangan jubin, tunjukkan gambar sekali sahaja
  • space: jubin gambar ke dua arah. Jangan sekali-kali memotong gambar melainkan satu gambar terlalu besar untuk dimuatkan. Sekiranya terdapat banyak gambar, letakkan gambar dengan jelas sehingga sentiasa menyentuh bahagian tepi.
  • round: jubin gambar ke dua arah. Jangan sekali-kali memotong gambar melainkan satu gambar terlalu besar untuk dimuatkan. Sekiranya banyak gambar sesuai dengan ruang yang tersisa, lekapkan atau rentangkan untuk mengisi ruang. Sekiranya tinggal kurang dari setengah satu lebar gambar, peregangan, jika lebih banyak, regangkan.

Terdapat juga sintaks dua nilai:

.element ( /* background-repeat: horizontal vertical */ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; )

Yang menjadikan sintaks satu-nilai hanya singkatan untuk sintaks dua-nilai. Contohnya, roundbetul-betul round round.

Anda juga boleh memisahkan pelbagai nilai koma jika anda berhadapan dengan pelbagai latar belakang.

Demo

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

Demo interaktif mengenai cara spacedan cara roundkerja, berbanding dengan repeat:

Lihat Pen
latar belakang yang berbeza oleh Chris Coyier (@chriscoyier)
di CodePen.

Demo mengubah saiz lain, menunjukkan sempadan "palsu":

Lihat
Gambar Penempadan Sempadan dengan Cara Mudah oleh ShowTalk Show (@shoptalkshow)
di CodePen.

Inilah demo lain yang menyeronokkan dengan demonstrasi hamburger background-repeat: round;.

Berkaitan

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

Sumber

  • Spesifikasi CSS3
  • MDN

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
1+ 1+ 1+ 3.5+ 4+ 1+ 1+

Synta pelbagai nilai yang dipisahkan koma hanya disokong di Firefox 3.6+ dan IE 9+. Sintaks dua nilai untuk mengawal nilai mendatar dan menegak yang dipisahkan hanya disokong dalam Firefox 13+ dan IE 9+. Kata kunci rounddan spacekata kunci hanya Firefox 49+ dan IE 9+.