Latar-klip - Trik CSS

Anonim

background-clip membolehkan anda mengawal sejauh mana gambar atau warna latar melampaui lapisan atau kandungan elemen.

.frame ( background-clip: padding-box; )

Nilai

  • border-boxadalah nilai lalai. Ini membolehkan latar belakang meluas hingga ke tepi luar sempadan elemen.
  • padding-box klip latar belakang di pinggir luar pelapik elemen dan tidak membiarkannya meluas ke sempadan.
  • content-boxklip latar belakang di tepi kotak kandungan.
  • inheritmenerapkan background-cliptetapan ibu bapa pada elemen yang dipilih.

Demo

background-clip dijelaskan dengan tepat dalam tindakan, jadi kami telah mengumpulkan dua demo untuk menunjukkan bagaimana ia berfungsi.

Dalam demo pertama, setiap div mempunyai satu perenggan di dalamnya. Perenggan itu adalah kandungan div. Setiap div mempunyai latar belakang kuning dan 5 piksel, sempadan biru terang separa telus.

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

Secara lalai, atau dengan background-clip: border-boxset, latar belakang kuning meluas hingga ke pinggir luar sempadan. Perhatikan bagaimana sempadan kelihatan seperti hijau kerana latar belakang kuning di bawahnya.

Apabila background-clipdiubah menjadi padding-box, warna latar berhenti di mana lapisan elemen berakhir. Perhatikan bahawa sempadan berwarna biru kerana latar belakang tidak diizinkan berdarah ke sempadan.

Dengan background-clip: content-box, warna latar hanya berlaku untuk kandungan div, dalam hal ini elemen perenggan tunggal. Pad dan sempadan div tidak mempunyai warna latar belakang. Tetapi, ada sedikit perincian yang perlu disebutkan: warnanya meluas ke margin kandungan. Lihat perbezaan antara contoh pertama dan kedua dengan content-box.

Pada content-boxcontoh pertama , margin lalai penyemak imbas diterapkan pada perenggan, dan klip latar belakang setelah margin. Dalam contoh kedua, margin ditetapkan ke 0 di CSS, dan latar belakangnya dipotong di tepi teks.

Tayangan interaktif seterusnya background-clipdengan gambar latar. Kandungan dalam demo ini adalah div kosong yang lebih kecil.

Lihat contoh interaktif klip latar belakang Pen oleh Timothy Miller (@tjacobdesign) di CodePen.

Demo ini juga berlaku background-size: coverdan background-repeat: no-repeatselain untuk background-clipmengawal gambar latar belakang, yang sebaliknya akan berulang hingga pemotongan.

Teks

Terdapat versi awalan vendor ini yang berfungsi untuk memotong latar belakang teks. Untuk melihat karya itu, teks juga perlu telus. Nasib baik, ada satu lagi sifat warna teks awalan vendor yang boleh ditimpa dengan berkesan color, menjadikannya selamat digunakan kerana ia boleh mempunyai kekurangan:

.background-clip-text ( /* if we can clip, do it */ -webkit-text-fill-color: transparent; -webkit-background-clip: text; /* what will show through the text ~ or ~ what will be the background of that element */ background: whatever; /* fallback text color ~ or ~ the actual color of text, so it better work on the background */ color: red; )

Firefox, Chrome, dan Safari menyokong ini.

Lihat
teks Pen Lit oleh Chris Coyier (@chriscoyier)
di CodePen.

Berkaitan

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

Lebih Banyak Sumber

  • background-clip dalam spesifikasi CSS3
  • latar-klip di MDN
  • Model Kotak CSS

Sokongan Penyemak Imbas

Semua siap!

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