Background-repeat - Trik CSS

Anonim

Jika sebuah background-imageproperti ditentukan, background-repeatproperti di CSS menentukan apakah (dan bagaimana) itu akan diulang. Berikut contohnya:

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

Ini adalah nilai yang mungkin untuk properti ini (selain hal-hal biasa seperti inherit):

  • repeat: petak gambar di kedua arah. Ini adalah nilai default.
  • repeat-x: petak gambar secara horizontal
  • repeat-y: petak gambar secara vertikal
  • no-repeat: jangan ubin, cukup tunjukkan gambar sekali
  • space: petak gambar di kedua arah. Jangan pernah memotong gambar kecuali satu gambar terlalu besar untuk muat. Jika beberapa gambar bisa muat, beri jarak agar gambar selalu menyentuh tepinya.
  • round: petak gambar di kedua arah. Jangan pernah memotong gambar kecuali satu gambar terlalu besar untuk muat. Jika beberapa gambar dapat muat dengan ruang yang tersisa, remas atau rentangkan untuk mengisi ruang. Jika lebarnya kurang dari setengah satu gambar, regangkan, jika lebih, regangkan.

Ada juga sintaks dua nilai:

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

Yang membuat sintaks nilai tunggal hanya singkatan dari sintaks dua nilai. Misalnya, roundbenar-benar round round.

Anda juga dapat memisahkan beberapa nilai dengan koma jika Anda berurusan dengan banyak latar belakang.

Demo

Lihat pen
background-repeat by CSS-Tricks (@ css-trick)
di CodePen.

Demo interaktif tentang bagaimana spacedan roundbekerja, dibandingkan dengan repeat:

Lihat Pen
The Different `background-repeat`s oleh Chris Coyier (@chriscoyier)
di CodePen.

Demo pengubahan ukuran lainnya, menunjukkan batas "palsu":

Lihat
Gambar Sempadan Pena dengan Cara Mudah dengan ShopTalk Show (@shoptalkshow)
di CodePen.

Berikut demo menyenangkan lainnya dengan mendemonstrasikan hamburger background-repeat: round;.

Terkait

  • background-attachment
  • klip latar belakang
  • warna latar belakang
  • gambar latar belakang
  • background-origin
  • background-position
  • background-size

Sumber daya

  • Spesifikasi CSS3
  • MDN

Dukungan Browser

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

Sintta nilai ganda yang dipisahkan koma hanya didukung di Firefox 3.6+ dan IE 9+. Sintaks dua nilai untuk mengontrol nilai horizontal dan vertikal yang dipisahkan hanya didukung di Firefox 13+ dan IE 9+. Kata kunci rounddan spacehanya Firefox 49+ dan IE 9+.