Dengan munculnya kerja CSS3 DTP dalam banyak hal telah menjadi lebih mudah dan lebih logis: setelah semua, kini Anda dapat lakukan untuk fleksibel mengkonfigurasi sebuah objek, lebih jarang beralih ke JavaScript.Katakanlah Anda perlu mengatur transparansi latar belakang - CSS segera menawarkan beberapa pilihan.Background
didefinisikan oleh satu set atribut (background-image, background-position, background-size, background-repeat, background-attachment, background-asal, latar belakang-clip, background-color), yang masing-masing dapat ditentukan sendiri atauuntuk bersatu di bawah latar belakang atribut yang sama.Mari kita periksa masing-masing secara lebih rinci.
atribut background-color
Dalam CSS, warna latar belakang dapat diatur dalam beberapa cara: menggunakan kode heksadesimal, nama warna atau RGB-entry.Dalam CSS3 menjadi mungkin untuk menggunakan bukan opsi RGB-rekaman dengan RGBA.
kode hex warna ditulis dalam properti setelah kisi: background-color: # FFDAB9.Jika karakter berpasangan menyamai rekor tersebut, kode ini biasanya dipotong kecil: # ccff00 dapat ditulis sebagai # cf0:
body {background-color: # cf0;}.
nama di sana, bahkan di warna yang paling eksotis.Misalnya, di samping standar merah dan putih, Anda dapat menggunakan NavajoWhite (#FFDEAD) atau Honeydew2 (# E0EEE0):
body {background-color: purple;}.
pilihan terakhir RGB atau merekam RGBA memungkinkan Anda untuk menentukan tidak hanya warna tapi juga transparansi CSS latar belakang, tetapi cara untuk bekerja di IE 9 versi hanya lebih tua.Browser lain mengenali varian normal dengan transparansi.Menurut standar W3C adalah lebih baik untuk menggunakan semua RGBA sama bukan RGB lebih biasa.Nilai terakhir
di RGBA set opacity dari latar belakang dan dari 0 (transparan) ke 1 (buram).
Ada beberapa nilai yang tidak biasa.Warna latar belakang dapat ditentukan dengan menggunakan HSL dan HSLA.Keduanya ditambahkan dalam CSS3, dan karena itu tidak didukung oleh IE versi 9 atau lebih tinggi.Pilihan yang identik dengan RGB atau RGBA, hanya dalam format yang berbeda: Hue (hue - nilai pada roda warna, diberikan dalam derajat), Saturate (saturasi - intensitas warna sebagai persentase, dari 0 sampai 100), Lightness (ringan - kecerahan, diukur sama parameter Saturate).
atribut background-image
paling versi lintas-browser dari latar belakang transparan - adalah penggunaan gambar.Dalam CSS3, Anda dapat menentukan lebih gambar, ini dilakukan melalui koma.Contoh:
body {background-image: url (bg1.png), url (bg2.png)}.
mendukung ini bahkan IE8.Beberapa gambar sebagai latar belakang yang digunakan dalam tata letak karet.Yang penting, jangan lupa untuk menggunakan gambar apapun yang ditetapkan dalam warna latar belakang CSS Anda, karena pengguna hanya dapat meng-upload gambar.
atribut background-position
Jika Anda menggunakan gambar untuk menentukan blok latar belakang, CSS memungkinkan Anda untuk memposisikan gambar di mana saja pada layar.Secara default, gambar terletak di sudut kiri atas.Atribut menerima arah verbal (atas, bawah, kiri, kanan), atau numerik (bunga, piksel dan unit lainnya).Hal ini diperlukan untuk menentukan dua nilai untuk horisontal dan vertikal:
body {background-position: center yang tepat;} - dalam contoh ini, latar belakang akan terletak di sisi kanan halaman, dengan bagian atas dan bawah dari jarak ke gambar yang sama.
atribut background-size
Kadang-kadang Anda perlu menggunakan CSS untuk meregangkan latar belakang atau mengurangi ukurannya.Untuk tujuan ini, atribut background-ukuran, dan ukuran dapat didefinisikan sebagai piksel latar belakang atau persentase, atau unit lain pengukuran.
Dengan atribut ini, ada beberapa masalah: untuk tampilan yang benar dari latar belakang di browser lama Anda harus menggunakan prefiks.Tentu saja, versi saat ini sepenuhnya mendukung atribut ini dan kebutuhan untuk sifat tertentu menghilang.
atribut background-attachment
Atribut ini menentukan perilaku gambar latar belakang ketika bergulir.Sebagai contoh, dapat mengambil 3 nilai (tidak termasuk mewarisi, untuk total semua atribut dalam artikel ini):
- tetap - membuat gambar pada latar belakang tetap;
- scroll - gulungan latar belakang dengan sisa elemen;
- lokal - gambar di latar belakang menggulir jika bergulir adalah konten.Latar belakang, yang melampaui konten adalah tetap.
Contoh penggunaan:
body {background-attachment tetap}.
Saat ini, Firefox tidak mendukung properti terbaru (lokal).
atribut background-asal
Atribut ini bertanggung jawab untuk posisi elemen.Versi browser sebelumnya memerlukan penggunaan awalan.Properti itu sendiri memiliki tiga parameter:
- posisi padding-kotak dari tepi latar belakang, sementara memperhitungkan ketebalan frame;
- properti border-kotak berbeda dari sebelumnya di bahwa garis batas dapat sepenuhnya atau sebagian menutupi latar belakang;
- konten-kotak posisi gambar pryavyazyvaya isinya.
Jika Anda menentukan beberapa nilai, browser dapat bereaksi dengan cara mereka sendiri: Firefox dan Opera hanya menerima opsi pertama.
atribut background-ulangi
Sebagai aturan, jika gambar latar belakang yang ditentukan, maka harus diulang horizontal atau vertikal.Untuk ini dan menggunakan atribut background-repeat.Jadi, blok latar belakang, CSS yang berisi properti seperti dapat memiliki salah satu dari beberapa pilihan:
- no-repeat - gambar yang muncul di halaman dalam bentuk tunggal;
- ulangi - pola berulang dalam x dan y;
- berulang-x - hanya horizontal;
- repeat-y - hanya secara vertikal;
- ruang - pola berulang, tetapi jika ruang diisi tidak, maka ada void antara gambar;
- putaran - gambar akan diskala, jika tidak mengisi seluruh area seluruh gambar.
Contoh atribut:
body {background-repeat: no-repeat repeat} - sama background-repeat: repeat-y.
Dalam CSS3 dapat menentukan nilai untuk beberapa gambar jika parameter perpindahan dipisahkan dengan koma.
atribut background-clip
Atribut ini menentukan perilaku latar belakang di bawah batas (misalnya, dalam kasus frame bertitik):
- padding-box - latar belakang ditampilkan di pedalaman blok;
- perbatasan-kotak - datang dalam lingkup gambar;
- konten-kotak - gambar di latar belakang hanya muncul dalam konten.
Contoh penggunaan:
body {background-clip: konten-kotak;}.
Chrom dan Safari memerlukan penggunaan -webkit- awalan.Atribut opacity
dan menyaring
opacity atribut memungkinkan Anda untuk mengatur transparansi latar belakang - properti CSS akan bekerja di semua browser.Nilai disesuaikan 0,0-1,0 inklusif.Dengan ini Anda dapat mengatur transparansi latar belakang CSS tanpa nilai integer bukan 0,3 cukup untuk menulis 0,3:
.block {background-image: url (img.png);opacity: 0,3;}.
Untuk mengatur transparansi latar belakang, CSS cocok bahkan untuk IE bawah versi kesembilan, gunakan filter atribut:
.block {background-image: url (img.png);filter: alpha (opacity = 30);}.
Dalam hal ini, opacity diatur antara 0 dan 100. Perhatikan bahwa opacity atribut pengaturan transparansi yang berbeda melalui RGBA keturunan: opacity menggunakan latar belakang transparan tidak hanya, tetapi juga semua item dalam unit.
Selalu pastikan statistik penggunaan browser dari CIS dan semua negara-negara lain.Masalah terbesar dari semua DTP - versi IE, mereka tidak mengizinkan penggunaan penuh CSS3 tersebut.Jika tata letak jangan lupa untuk menggunakan layanan khusus yang memeriksa apakah browser Anda adalah CSS properti.Jika Anda tidak dapat menginstal versi browser, Anda mendapatkan layanan yang memeriksa pengoperasian situs di browser yang berbeda secara online.
