CSS transparansi latar belakang. latar belakang transparan atau teks dengan CSS

Dengan munculnya CSS3 web designer bekerja dalam banyak hal telah menjadi lebih mudah dan lebih logis: setelah semua, kini Anda dapat benar-benar fleksibel menyesuaikan objek apapun, lebih jarang beralih ke JavaScript. Katakanlah Anda perlu mengatur transparansi latar belakang - CSS segera menawarkan beberapa pilihan.

Latar Belakang 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 ditugaskan secara terpisah atau gabungan di bawah atribut latar belakang. Mari kita periksa masing-masing secara rinci.

Atribut background-color

Dalam CSS, warna latar belakang dapat diatur dalam beberapa cara: menggunakan kode hex, nama warna atau RGB-entry. Dalam CSS3 menjadi mungkin untuk menggunakan bukan pilihan RGB-rekaman dengan RGBA.

kode warna hex dicatat dalam properti setelah kisi: background-color: # FFDAB9. Jika karakter dalam entri ini adalah pasangan yang sama, kode ini biasanya dipotong kecil: # ccff00 dapat ditulis sebagai # cf0:

body {background-color: # cf0 ;}.

Nama ini, bahkan dalam warna yang paling eksotis. Misalnya, di samping merah standar dan putih Anda dapat menggunakan NavajoWhite (#FFDEAD) atau Honeydew2 (# E0EEE0):

body {background-color: purple; }.

Pilihan terakhir adalah RGB atau RGBA entri memungkinkan Anda untuk menentukan tidak hanya warna tapi juga transparansi latar belakang CSS, tetapi metode ini hanya berfungsi di versi IE lebih tua dari 9. Browser lain mengenali versi normal dengan transparansi. Menurut standar W3C adalah lebih baik untuk menggunakan masih RGBA bukan RGB lebih biasa.

Nilai terakhir di latar belakang RGBA dan menetapkan opacity dari 0 (transparan) ke 1 (buram).

Ada beberapa nilai yang tidak biasa. Warna latar belakang dapat diatur menggunakan HSL dan HSLA. Keduanya ditambahkan ke CSS3, dan karena itu tidak didukung oleh IE versi 9 atau lebih tinggi. Perwujudan RGB identik atau RGBA, hanya dalam format yang berbeda: Hue (shade - 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

Versi yang terbaru lintas-browser dari latar belakang transparan - ini adalah penggunaan gambar. Dalam CSS3, Anda dapat mengatur bahkan lebih banyak gambar, ini dilakukan melalui koma. contoh:

{Background image-body: url (bg1.png), url (bg2.png)}.

Ini cara untuk mendukung bahkan IE8. Beberapa gambar dalam latar belakang karet yang digunakan dalam tata letak. Yang penting, jangan lupa untuk menggunakan gambar apapun dan mengatur warna latar belakang dalam CSS, karena pengguna hanya dapat meng-upload gambar.

Atribut background-position

Jika Anda menggunakan gambar untuk mengatur unit latar belakang, CSS memungkinkan Anda untuk memposisikan gambar di mana saja pada layar. Secara default, gambar terletak di sudut kiri atas. Atribut mengambil baik instruksi lisan (atas, bawah, kiri, kanan), seorang numerik (bunga, piksel dan unit lainnya). Dalam hal ini, Anda harus menentukan dua nilai, horisontal dan vertikal:

body {background-position: center yang tepat ;} - dalam contoh ini, pola akan terletak di sisi kanan halaman, bagian atas dan bawah gambar jarak ke yang sama.

Atribut background-size

Kadang-kadang perlu untuk meregangkan latar belakang CSS atau mengurangi ukurannya. Untuk melakukannya, gunakan atribut background-ukuran, dan ukuran latar belakang dapat diatur dalam pixel atau persentase, dan unit lainnya.

Dengan atribut ini, ada beberapa masalah: untuk tampilan yang benar dari latar belakang di versi sebelumnya dari prefiks browser yang akan digunakan. 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 sementara bergulir. Jadi, dapat mengambil 3 nilai (tidak termasuk mewarisi, total untuk semua atribut dibahas dalam artikel ini):

• tetap - membuat gambar pada latar belakang tetap;
• gulir - gulungan latar belakang dengan sisa unsur-unsur;
• lokal - gambar di latar belakang menggulir jika bergulir memiliki konten. Latar belakang yang melampaui isi dari frame adalah tetap.

Contoh penggunaan:

body {background-attachment tetap}.

Saat ini, Firefox tidak mendukung properti terakhir (lokal).

Atribut background-asal

Atribut ini bertanggung jawab untuk elemen positioning. browser awal memerlukan penggunaan awalan. Properti itu sendiri memiliki tiga parameter:

• padding-box diposisikan relatif terhadap pola tepi, sementara memperhitungkan ketebalan frame;
• border-box sifat yang berbeda dari sebelumnya di bahwa garis batas dapat sepenuhnya atau sebagian tumpang tindih pola;
• konten-kotak posisi gambar pryavyazyvaya isinya.

Jika Anda menentukan beberapa nilai, maka browser dapat bereaksi dengan cara mereka sendiri: Firefox dan Opera menganggap hanya pilihan pertama.

Atribut background-repeat

Sebagai aturan, jika gambar latar belakang yang ditentukan, maka harus diulang secara horizontal atau vertikal. Untuk ini dan menggunakan atribut background-repeat. Dengan demikian, blok latar belakang, CSS yang berisi properti seperti dapat memiliki salah satu dari beberapa parameter:

• no-repeat - gambar muncul pada halaman dalam versi tunggal;
• ulangi - latar belakang diulang dalam x dan y;
• ulangi-x - hanya secara horizontal;
• repeat-y - hanya secara vertikal;
• ruang - latar belakang diulang, tetapi jika ruang tidak mungkin untuk mengisi antara gambar tampak kosong;
• bulat - gambar diperkecil, jika tidak mengisi seluruh area keseluruhan gambar.

Contoh atribut:

body {background-repeat: no ulangi ulangi} - mirip background-repeat: repeat-y.

Dalam CSS3 dapat menentukan nilai untuk beberapa gambar ketika daftar parameter, dipisahkan dengan koma.

Atribut background-clip

Atribut ini mendefinisikan perilaku latar belakang di bawah batas (misalnya, dalam kasus frame putus-putus):

• padding-box - latar belakang ditampilkan di pedalaman blok;
• border-box - gambar berada di bawah kerangka;
• konten-kotak - gambar di latar belakang hanya akan muncul dalam konten.

Contoh penggunaan:

body {background-clip: isi- kotak;}.

Chrom dan Safari membutuhkan awalan -webkit-.

atribut opacity dan filter

atribut opacity memungkinkan Anda untuk mengatur transparansi latar belakang - properti CSS akan bekerja di semua browser. Nilai diatur dalam kisaran 0,0-1,0 inklusif. Dalam hal ini, Anda dapat mengatur transparansi latar belakang CSS tidak ada nilai integer bukan 0,3 cukup untuk menulis 0,3:

.block {background-image: url ( img.png); opacity: 0,3;}.

Untuk mengatur opacity latar belakang, CSS cocok bahkan untuk IE bawah versi kesembilan, menggunakan atribut filter:

.block {background-image: url ( img.png); filter: alpha (opacity = 30)}.

Dalam hal ini, nilai opacity diatur antara 0 dan 100. Perhatikan bahwa opacity atribut pengaturan transparansi yang berbeda melalui warisan RGBA: bila menggunakan opacity menjadi jelas tidak hanya latar belakang, tetapi juga semua elemen dalam unit.

Selalu memantau statistik penggunaan untuk browser CIS dan semua negara-negara lain. Masalah terbesar dari semua DTP - versi IE, mereka tidak memungkinkan Anda untuk menggunakan sejauh CSS3 penuh. Dalam tata letak jangan lupa untuk menggunakan layanan khusus yang memeriksa apakah browser Anda mendukung setiap properti CSS. Jika Anda tidak dapat menginstal versi browser, mencari layanan yang akan memeriksa situs bekerja di beberapa browser secara online.