background-clip dan background-origin adalah properti modul background baru yang ditambahkan di CSS3, digunakan untuk menentukan posisi latar belakang.
background-clip digunakan untuk menentukan apakah latar belakang berisi area perbatasan. Dan background-origin digunakan untuk menentukan posisi referensi untuk perhitungan posisi background.
Sintaksnya adalah:
klip latar belakang: [batas |.padding] [, [batas |.padding]]* |
Untuk klip latar belakang:
Jika ini adalah nilai padding, latar belakang mengabaikan tepi padding dan batasnya transparan. Jika merupakan nilai batas, maka latar belakangnya menyertakan area batas. Jika ada beberapa gambar gambar latar belakang, nilai klip latar belakang yang bersangkutan dipisahkan dengan koma.
Untuk asal latar belakang:
Jika merupakan nilai padding, posisinya relatif terhadap tepi padding ("0 0" adalah sudut kiri atas dari tepi padding, dan "100% 100%" adalah sudut kanan bawah). Jika merupakan nilai batas, berarti tepi batas relatif. Nilai batas relatif terhadap tepi konten. Seperti klip latar, beberapa nilai dipisahkan dengan koma. Jika klip latar belakang adalah nilai padding, asal latar belakang adalah nilai batas, dan posisi latar belakang adalah "kiri atas" (nilai awal default), sudut kiri atas gambar latar belakang akan terpotong.
Kedua atribut ini hanya muncul dari CSS3. Bagaimana dengan perilaku default di modul latar belakang ketika atribut ini tidak digunakan?
| klip latar belakang defaultnya seperti klip latar belakang: perbatasan. background-origin defaultnya seperti background-origin:padding. |
Tapi IE adalah kasus khusus (menyebalkan).
Di IE6 dan IE7, latar belakang elemen umum (kecuali tombol, dll.) setara dengan: background-clip:border;
Latar belakang elemen hasLayout (plus tombol, dll.) setara dengan: background-clip:padding;
Sepasang properti CSS3 ini telah diterapkan di browser seperti Mozilla, Safari 3 dan Konqueror, namun semuanya diekspresikan melalui properti pribadinya.
Atribut privat browser dasar non-IE biasanya dimulai dengan -xxx-, -o- bersifat privat untuk Opera dengan Presto sebagai mesinnya, -icab- bersifat privat untuk iCab, dan -khtml- adalah browser dengan KHTML sebagai mesinnya. (seperti Konqueror Safari), -moz- adalah browser yang didasarkan pada mesin Gecko Mozilla (seperti Firefox, Mozilla), -webkit- adalah browser (seperti Safari, Swift) yang didasarkan pada mesin rendering Webkit (turunan dari KHTML ) .
Artinya, atribut privat yang didukung adalah:
| -moz-klip-latar belakang -webkit-latar belakang-klip -khtml-klip-latar belakang -moz-latar belakang-asal -webkit-latar belakang-asal -khtml-latar belakang-asal |
Berikut adalah contoh sederhana penggunaan atribut background-origin. Efeknya adalah sebagai berikut:
Kode HTML:
Kode CSS:
tombol { border:3px double #95071b;/*Gunakan batas ganda 3px untuk menyimulasikan garis putih pada desain*/ warna latar belakang:#95071b; /*Menetapkan metode pemotongan latar belakang dan garis panduan*/ -moz-latar belakang-asal:padding; /*Kompatibel dengan penerusan*/ warna:#fff; /*Memperbaiki masalah ketinggian pada IE6*/ |
Kekurangan: Efek ini tidak dapat dicapai pada Opera. Tentu saja ini hanya solusi bagi mereka yang terobsesi dengan kode HTML (sebatas mempelajari dan memahami atribut background-clip dan background-origin). Adapun kelebihan berbagai metode. Kekurangannya terserah Anda untuk mempertimbangkannya.