CSS ketelusan latar belakang. latar belakang telus atau teks dengan CSS

Dengan kedatangan pereka web CSS3 bekerja di rumah sebenar telah menjadi lebih mudah dan lebih logik: selepas semua, kini anda boleh benar-benar fleksibel menyesuaikan apa-apa objek, kurang kerap mengambil jalan keluar dengan JavaScript. Katakan anda perlu menyesuaikan ketelusan latar belakang - CSS segera menawarkan beberapa pilihan.

Latar belakang ditakrifkan oleh satu set atribut (latar belakang imej, latar belakang kedudukan , latar belakang saiz, latar belakang-ulangan, background-attachment, latar belakang asal, latar belakang-klip, latar belakang warna), setiap yang boleh diberikan secara berasingan atau digabungkan di bawah atribut latar belakang. Mari kita kaji setiap daripada mereka secara terperinci.

Atribut background-color

Dalam CSS, warna latar belakang boleh ditetapkan dalam beberapa cara: menggunakan kod hex, nama warna atau RGB-entry. Dalam CSS3 ia menjadi mungkin untuk menggunakan bukan pilihan RGB rakaman dengan RGBA.

Hex kod warna direkodkan dalam hotel selepas kekisi: background-color: # FFDAB9. Jika watak-watak dalam entri ini adalah pasangan yang sama, kod biasanya potongan kecil: # ccff00 boleh ditulis sebagai # cf0:

body {background-color: # cf0 ;}.

Nama ini, walaupun dalam warna yang paling eksotik. Sebagai contoh, sebagai tambahan kepada merah standard dan putih anda boleh menggunakan Navajocolor (#FFDEAD) atau Honeydew2 (# E0EEE0):

body {background-color: purple; }.

Pilihan kedua adalah RGB atau RGBA kemasukan membolehkan anda untuk menentukan bukan sahaja warna tetapi juga ketelusan latar belakang CSS, tetapi kaedah yang hanya berfungsi dalam IE versi yang lebih lama daripada 9. Pelayar lain mengiktiraf versi normal dengan ketelusan. Menurut standard W3C ia adalah lebih baik untuk menggunakan masih RGBA bukannya RGB yang lebih biasa.

Nilai terakhir dalam RGBA latar belakang dan menetapkan kelegapan dari 0 (telus) kepada 1 (legap).

Terdapat nilai-nilai yang luar biasa. Warna latar belakang boleh ditetapkan menggunakan HSL dan HSLA. Kedua-dua telah ditambah kepada CSS3, dan oleh itu tidak disokong oleh IE versi 9 atau yang lebih tinggi. Penjelmaan RGB serupa atau RGBA, hanya dalam format yang lain: Hue (naungan - nilai pada roda warna, diberikan dalam darjah), menepukan (tepu - keamatan warna sebagai peratusan, dari 0 hingga 100), ringan (ringan - kecerahan, diukur sama parameter menepukan ).

Atribut background-image

Versi silang pelayar sebahagian besar daripada latar belakang telus - ini adalah penggunaan imej. Dalam CSS3, anda boleh menetapkan walaupun lebih banyak imej, ini dilakukan melalui koma. contoh:

{Imej latar belakang badan: url (bg1.png), url (bg2.png)}.

Ini cara untuk menyokong walaupun IE8. Beberapa imej di latar belakang getah yang digunakan dalam susun atur. Yang penting, jangan lupa untuk menggunakan mana-mana imej dan menetapkan warna latar belakang dalam CSS, kerana pengguna hanya boleh memuat naik imej.

Atribut latar belakang kedudukan

Jika anda menggunakan imej untuk menetapkan unit latar belakang, CSS membolehkan anda meletakkan imej mana-mana sahaja pada skrin. Secara lalai, imej ini terletak di sudut kiri atas. Atribut mengambil sama ada arahan lisan (atas, bawah, kiri, kanan), yang berangka (faedah, piksel dan unit-unit lain). Dalam kes ini, anda mesti nyatakan dua nilai, mendatar dan menegak:

body {latar belakang kedudukan: pusat kanan ;} - dalam contoh ini, corak yang akan terletak di sebelah kanan atas halaman, bahagian atas dan bawah jarak imej untuk yang sama.

Atribut latar belakang bersaiz

Kadang-kadang ia adalah perlu untuk meregangkan latar belakang CSS atau mengurangkan saiznya. Untuk melakukan ini, menggunakan latar belakang bersaiz sifat, dan saiz latar belakang boleh ditetapkan dalam piksel atau peratusan, dan mana-mana unit-unit lain.

Dengan sifat ini, terdapat beberapa masalah: untuk paparan betul latar belakang dalam versi awal awalan pelayar untuk digunakan. Sudah tentu, versi semasa menyokong penuh sifat ini dan keperluan untuk sifat-sifat tertentu hilang.

Atribut background-attachment

Sifat ini menentukan tingkah laku imej latar belakang semasa menatal. Jadi, ia boleh mengambil masa 3 nilai (tidak termasuk mewarisi, jumlah untuk semua sifat-sifat yang dibincangkan dalam artikel ini):

• tetap - membuat gambar pada latar belakang tetap;
• tatal - skrol latar belakang dengan seluruh unsur-unsur;
• tempatan - imej pada latar belakang menatal jika menatal mempunyai kandungan. Latar belakang yang melampaui kandungan bingkai adalah tetap.

Contoh penggunaan:

body {background-attachment tetap}.

Pada masa ini, Firefox tidak menyokong harta terakhir (tempatan).

Atribut latar belakang asal

Sifat ini bertanggungjawab untuk elemen penentududukan. pelayar awal memerlukan penggunaan imbuhan. Harta sendiri mempunyai tiga parameter:

• padding-kotak diletakkan berbanding dengan corak pinggir, di samping mengambil kira ketebalan bingkai;
• hartanah border-kotak yang berbeza dari sebelumnya kerana garis sempadan boleh sepenuhnya atau sebahagiannya bertindih corak;
• kandungan-kotak kedudukan imej pryavyazyvaya kandungannya.

Jika anda menentukan beberapa nilai, kemudian pelayar boleh bertindak balas dengan cara mereka sendiri: Firefox dan Opera melihat satunya pilihan pertama.

Atribut latar belakang-repeat

Sebagai peraturan, jika imej latar belakang dinyatakan, ia perlu diulangi secara mendatar atau menegak. Untuk ini dan menggunakan atribut latar belakang-ulangan. Oleh itu, latar belakang blok, CSS yang mengandungi apa-apa harta boleh mempunyai salah satu daripada beberapa parameter:

• no-repeat - imej muncul pada halaman dalam versi tunggal;
• mengulangi - Latar belakang diulang dalam x dan y;
• mengulangi-x - hanya mendatar;
• mengulangi-y - hanya menegak;
• ruang - latar belakang berulang, tetapi sekiranya tidak mustahil untuk mengisi antara gambar-gambar kelihatan kosong;
• pusingan - imej dikecilkan, jika ia tidak mengisi keseluruhan kawasan sejuk dalam gambar.

Contoh sifat-sifat:

badan {background-repeat: NO- berulang berulang} - sama latar belakang-repeat: mengulangi-y.

Dalam CSS3 boleh menentukan nilai untuk berbilang imej apabila menyenaraikan parameter, dipisahkan dengan koma.

Atribut latar belakang-klip

Sifat ini mentakrifkan tingkah laku latar belakang di bawah sempadan (contohnya, dalam kes bingkai bertitik):

• padding-keselamatan - latar belakang dipaparkan di kawasan pedalaman di blok;
• border-kotak - imej datang di bawah rangka kerja;
• kandungan-kotak - gambar pada latar belakang hanya akan muncul dalam kandungan.

Contoh penggunaan:

body {background-music: kandungan- kotak;}.

Chrom dan Safari memerlukan awalan -webkit-.

sifat-sifat kelegapan dan penapis

kelegapan atribut membolehkan anda menetapkan ketelusan latar belakang - harta CSS akan bekerja dalam semua pelayar. nilai ditetapkan dalam julat 0,0-1,0 inklusif. Dalam kes ini, anda boleh menetapkan ketelusan latar belakang CSS tiada nilai integer bukan 0.3 adalah cukup untuk menulis 0,3:

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

Untuk menetapkan kelegapan latar belakang, CSS sesuai walaupun untuk IE bawah versi kesembilan, gunakan atribut penapis:

lain.Blok {background-image: url ( img.png); penapis: alpha (opacity = 30)}.

Dalam kes ini, nilai kelegapan terletak di antara 0 dan 100. Perhatikan bahawa kelegapan atribut tetapan ketelusan yang berbeza melalui RGBA warisan: apabila menggunakan kelegapan menjadi jelas bukan sahaja latar belakang, tetapi juga semua unsur-unsur dalam unit.

Sentiasa memantau statistik penggunaan anda untuk pelayar CIS dan negara-negara lain. Masalah yang paling besar daripada semua DTP - versi yang lebih lama IE, mereka tidak membenarkan anda untuk menggunakan CSS3 sejauh mana peringkat. Dalam susun atur jangan lupa untuk menggunakan perkhidmatan khas yang memeriksa sama ada pelayar anda menyokong apa-apa harta CSS. Jika anda tidak boleh memasang versi yang lebih lama pelayar, mencari perkhidmatan yang akan memeriksa kerja laman web ini dalam pelbagai pelayar dalam talian.