Latar belakang-asal - Trik CSS

Anonim

The background-originharta mentakrifkan di mana untuk cat latar belakang: seluruh seluruh unsur, di dalam sempadan, atau di dalam padding.

Terdapat empat nilai: border-box, padding-box, content-boxdan inherit. Inilah demo:

Lihat Demo Latar Belakang Pen Pen oleh Timothy Miller (@tjacobdesign) di CodePen.

background-origin mirip dengan latar-klip, kecuali mengubah saiz latar daripada memotongnya.

Contoh di atas telah background-size: coverdan background-repeat: no-repeatjuga berlaku. Sekiranya itu tidak berlaku, gambar akan berulang di bawah sempadan atau padding.

Berkaitan

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

Lebih Banyak Sumber

  • Spesifikasi CSS3
  • MDN

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
1+ 3+ 4+ 10.5+ 9+ Berfungsi Berfungsi