Klip latar belakang - Trik CSS

Anonim

background-clip memungkinkan Anda mengontrol seberapa jauh gambar atau warna latar belakang melampaui padding atau konten elemen.

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

Nilai

  • border-boxadalah nilai default. Hal ini memungkinkan latar belakang diperluas hingga ke tepi luar batas elemen.
  • padding-box klip latar belakang di tepi luar padding elemen dan tidak membiarkannya meluas ke batas.
  • content-boxklip latar belakang di tepi kotak konten.
  • inheritmenerapkan background-clippengaturan induk ke elemen yang dipilih.

Demo

background-clip paling baik dijelaskan dalam tindakan, jadi kami telah mengumpulkan dua demo untuk menunjukkan cara kerjanya.

Dalam demo pertama, setiap div memiliki satu paragraf di dalamnya. Paragraf adalah konten div. Setiap div memiliki latar belakang kuning dan 5 piksel, batas biru muda semi transparan.

Lihat klip latar belakang Pena oleh CSS-Trik (@ css-trick) di CodePen.

Secara default, atau dengan background-clip: border-boxset, latar belakang kuning meluas sampai ke tepi luar perbatasan. Perhatikan bagaimana perbatasan terlihat hijau karena latar belakang kuning di bawahnya.

Saat background-clipdiubah menjadi padding-box, warna latar belakang berhenti di tempat padding elemen berakhir. Perhatikan bahwa perbatasannya berwarna biru karena latar belakang tidak diperbolehkan untuk masuk ke dalam perbatasan.

Dengan background-clip: content-box, warna latar belakang hanya berlaku untuk konten div, dalam hal ini elemen paragraf tunggal. Padding dan border div tidak memiliki warna latar belakang. Tapi, ada satu detail kecil yang perlu disebutkan: warnanya meluas ke margin konten. Lihat perbedaan antara contoh pertama dan kedua dengan content-box.

Dalam content-boxcontoh pertama , margin default browser diterapkan ke paragraf, dan klip latar belakang setelah margin. Dalam contoh kedua, margin diatur ke 0 di CSS, dan latar belakang dipotong di tepi teks.

Ini acara interaktif berikutnya background-clipdengan gambar latar belakang. Konten dalam demo ini adalah div kosong yang lebih kecil.

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

Demo ini juga berlaku background-size: coverdan background-repeat: no-repeatselain background-clipuntuk mengontrol gambar latar belakang, yang jika tidak akan berulang hingga kliping.

Teks

Ada versi yang diawali vendor dari ini yang berfungsi untuk memotong latar belakang ke teks. Untuk melihat pekerjaan itu, teks juga harus transparan. Untungnya, ada properti warna teks yang diawali vendor lainnya yang dapat diganti secara efektif color, membuatnya aman digunakan karena dapat memiliki fallback:

.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 mendukung ini.

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

Terkait

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

Sumber Daya Lainnya

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

Dukungan Browser

Semua jelas!

Chrome Safari Firefox Opera YAITU Android iOS
1+ 3+ 4+ 10.5+ 9+ 4.1+ Bekerja