Ketelusan dalam CSS adalah teknik yang agak bergaya akhir-akhir ini, yang menyebabkan kesukaran dalam pelaksanaan merentas pelayar. Masih tiada kaedah universal yang membolehkan ketelusan dilaksanakan untuk semua pelayar. Walau bagaimanapun, baru-baru ini keadaan telah bertambah baik dengan ketara.

Artikel ini memberikan pandangan terperinci tentang pendekatan sedia ada, serta contoh kod dan penjelasan yang akan membantu anda mencapai hasil yang sama dalam semua penyemak imbas dengan usaha yang minimum.

Satu perkara yang patut disebut ialah walaupun ketelusan telah wujud selama beberapa tahun, ia tidak pernah menjadi sebahagian daripada piawaian CSS. Ini ialah sifat bukan standard yang sepatutnya menjadi sebahagian daripada spesifikasi CSS3.

Pendekatan lama

Dalam versi Firefox dan Safari yang lebih lama, anda mesti menggunakan sifat seperti berikut:

#myElement ( -khtml-opacity: .5; -moz-opacity: 0.5; )

Sifat -khtml-opacity telah digunakan dalam versi lama pelayar webkit. Hartanah ini telah ditamatkan dan tidak lagi diperlukan melainkan anda yakin bahawa sebahagian besar trafik tapak anda datang daripada pelawat yang menggunakan Safari 1.x, yang sudah tentu tidak mungkin.

Baris seterusnya menggunakan sifat -moz-opacity, yang berfungsi pada versi awal enjin Mozilla. Firefox berhenti menyokongnya dalam versi 0.9.

Ketelusan CSS dalam Firefox, Safari, Chrome dan Opera

Untuk kebanyakan penyemak imbas moden, adalah memadai untuk menggunakan sifat berikut:

#myElement ( kelegapan: .7; )

Dalam contoh di atas, elemen ditetapkan kepada 70% kelegapan (30% ketelusan). Iaitu, jika kita menetapkan nilai kepada satu, elemen itu akan menjadi legap, dan, dengan itu, menetapkan nilai ini kepada sifar akan menjadikannya tidak kelihatan.

Sifat kelegapan memproses 2 digit perpuluhan. Iaitu, nilai ".01" akan berbeza daripada nilai ".02", walaupun ini tidak ketara.

Ketelusan CSS untuk Internet Explorer

Seperti biasa, Internet Explorer tidak mesra dengan pelayar lain. Di samping itu, kami kini mempunyai tiga versi penyemak imbas ini dalam penggunaan yang agak meluas, tetapan ketelusan dalam setiap satunya adalah berbeza dan kadangkala memerlukan usaha tambahan untuk mendapatkan hasil yang positif.

#myElement ( penapis: alpha(opacity=40); )

Contoh ini menggunakan sifat penapis, yang berfungsi dalam versi 6-8, namun untuk versi 6 dan 7 terdapat satu had: sifat hasLayout elemen mesti ditetapkan kepada benar . Harta ini hanya terdapat dalam IE dan anda boleh membaca lebih lanjut mengenainya, sebagai contoh, di Habré.

Satu lagi cara untuk menetapkan ketelusan menggunakan CSS dalam IE8 ialah menggunakan pendekatan berikut (perhatikan komen):

#myElement ( penapis: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* berfungsi dalam IE6, IE7 dan IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; / * hanya untuk IE8 */ )

Baris pertama akan berfungsi dalam semua versi yang sedang digunakan, yang kedua - hanya dalam IE8. Ambil perhatian bahawa baris kedua menggunakan awalan -ms- dan nilainya dalam petikan.

Menetapkan dan Menukar Ketelusan CSS Menggunakan JavaScript atau jQuery

Anda boleh menggunakan kod berikut untuk menetapkan ketelusan:

Document.getElementById("myElement").style.opacity = ".4"; // untuk kebanyakan pelayar document.getElementById("myElement").style.filter = "alpha(opacity=40)"; // untuk IE

Sudah tentu, dalam kes ini adalah lebih mudah untuk menggunakan jQuery, sebagai tambahan, ia akan berfungsi dalam semua pelayar:

$("#myElement").css(( kelegapan: .4 )); // berfungsi dalam semua pelayar

Anda boleh menghidupkan sifat ini:

$("#myElement").animate(( opacity: .4 ), 1000, function() ( // Animasi selesai; kod ini berfungsi dalam semua pelayar. ));

fungsi RGBA

CSS3 merancang untuk menyokong saluran alfa menggunakan fungsi rgba. Ciri ini berfungsi dalam Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. Ia digunakan seperti ini:

#rgba ( latar belakang: rgba(98, 135, 167, .4); )

Dalam kes ini, parameter terakhir menunjukkan tahap kelegapan.

Fungsi HSLA

Sama seperti fungsi sebelumnya, CSS3 juga membenarkan anda menetapkan warna separa lutsinar menggunakan fungsi HSLA, parameternya ialah Hue, Saturation, Lightness dan saluran Alpha.

#hsla ( latar belakang: hsla(207, 38%, 47%, .4); )

Perkara penting apabila menggunakan fungsi rgba dan hsla ialah tetapan ketelusan tidak digunakan pada elemen anak, manakala penggunaan sifat kelegapan diwarisi.

Sifat kelegapan CSS bertanggungjawab untuk ketelusan elemen (gambar, teks, blok) dalam html.

Sintaks kelegapan CSS

kelegapan: nilai;

Di mana nilai boleh mengambil nilai sebenar dalam julat dari 0.0 hingga 1.0. Nilai 1.0 bermakna tiada ketelusan (lalai).

Contoh: seperti ketelusan dalam html

Contoh No. 1. Imej lutsinar dalam html

Imej pertama dipaparkan tanpa ketelusan, yang kedua dengan ketelusan 0.5

Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.

На странице преобразуется в следующее

CSS прозрачность - кросс-браузерное решение - 3.8 out of 5 based on 6 votes

В данном уроке мы рассмотрим CSS прозрачность, узнаем как придать различным элементам страницы прозрачность и добиться полной кросс-браузерности, т. е. одинаковой работы этого эффекта в различных браузерах.

Как задать прозрачность любого элемента

В CSS3 за создание прозрачных элементов отвечает свойство opacity, которое можно применять к любым элементам. У данного свойства имеются значения от 0 до 1, которые и определяют степень прозрачности. Где 0 - это полная прозрачность, (значение по умолчанию для всех элементов), а 1 полная непрозрачность. Записываются значения дробями: 0.1, 0.2, 0.3 и т. д.

Пример использования:

Ketelusan merentas pelayar

Tidak semua pelayar melihat dan melaksanakan sifat kelegapan di atas dengan cara yang sama. Dalam sesetengah kes, anda perlu menggunakan nama atau penapis harta yang berbeza.

Sifat kelegapan CSS3 disokong oleh jenis penyemak imbas berikut: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Sangat bagus :) penyemak imbas seperti Internet Explorer sehingga versi 9.0 tidak menyokong sifat kelegapan dan untuk mencipta ketelusan untuk penyemak imbas ini anda perlu menggunakan sifat penapis dan nilai alpha(Opacity=X), di mana X ialah integer dalam julat dari 0 hingga 100, yang menentukan tahap ketelusan. 0 adalah telus sepenuhnya dan 100 adalah legap sepenuhnya.

Seperti Firefox sebelum versi 3.5, ia menyokong sifat -moz-opacity dan bukannya kelegapan.

Pelayar seperti Safari 1.1 dan Konqueror 3.1, dibina pada enjin KHTML, menggunakan sifat -khtml-opacity untuk mengawal ketelusan.

Bagaimanakah anda boleh menetapkan ketelusan dalam CSS supaya ia kelihatan sama dalam semua pelayar? Untuk mencipta penyelesaian silang penyemak imbas untuk ketelusan elemen, mereka perlu menentukan bukan sahaja satu sifat kelegapan, tetapi set sifat berikut:

penapis: alpha(Opacity=50); /* Ketelusan untuk IE */ -moz-opacity: 0.5; /* Menyokong Mozilla 3.5 dan ke bawah */ -khtml-opacity: 0.5; /* Menyokong Konqueror 3.1 dan Safari 1.1 */ kelegapan: 0.5; /* Menyokong semua pelayar lain */

Ketelusan pelbagai elemen

Mari lihat beberapa contoh menetapkan ketelusan kepada elemen tertentu yang paling kerap digunakan pada halaman.

Ketelusan imej CSS.

Mari lihat beberapa pilihan untuk mencipta gambar lut sinar. Dalam contoh berikut, imej pertama tidak mempunyai set ketelusan, yang kedua mempunyai ketelusan 50%, dan yang ketiga mempunyai 30%.

Keputusan:

Ketelusan dalam CSS apabila menuding pada imej.

Ia selalunya perlu untuk membuat gambar atau mana-mana elemen lain telus pada masa kursor sedang melayang di atasnya. Anda boleh melakukan ini menggunakan CSS pseudo-class:hover. Untuk melakukan ini, gambar kami perlu diberikan dua kelas, satu normal - ini akan menjadi keadaan tidak aktif gambar dan kelas kedua dengan kelas pseudo: hover, di sini anda perlu menentukan ketelusan gambar pada masa ini daripada melayang kursor.

Anda boleh melihat hasilnya dalam demo.

Ketelusan latar belakang menggunakan CSS.

Di sini adalah perlu untuk diingat bahawa ketelusan digunakan untuk semua elemen bersarang dan mereka tidak boleh mempunyai ketelusan yang lebih besar daripada elemen bersarang.

Sebagai contoh, kami akan memberikan varian dengan latar belakang halaman yang dibuat menggunakan gambar dan blok dengan latar belakang yang dibuat menggunakan warna dan mempunyai ketelusan 50%.

Contoh kod:

Berikut adalah hasil kod yang disiarkan di atas:

orem Ipsum hanyalah teks tiruan bagi industri percetakan dan penataan. Lorem Ipsum telah menjadi teks tiruan standard industri sejak tahun 1500-an, apabila pencetak yang tidak dikenali mengambil galley jenis dan berebut-rebut untuk membuat buku spesimen jenis. Ia telah bertahan bukan sahaja lima abad, tetapi juga lompatan ke dalam penataan huruf elektronik Ia telah dipopularkan pada tahun 1960-an dengan keluaran helaian Letraset yang mengandungi petikan Lorem Ipsum, dan lebih baru-baru ini dengan perisian penerbitan desktop seperti Aldus PageMaker termasuk versi Lorem Ipsum.
Sudah lama diketahui bahawa pembaca akan terganggu oleh kandungan halaman yang boleh dibaca apabila melihat reka letaknya. Maksud menggunakan Lorem Ipsum ialah ia mempunyai pengedaran huruf yang lebih kurang normal, berbanding menggunakan "Kandungan di sini, kandungan di sini", menjadikannya kelihatan seperti bahasa Inggeris yang boleh dibaca. Banyak pakej penerbitan desktop dan editor halaman web kini menggunakan Lorem Ipsum sebagai teks model lalai mereka, dan carian untuk "lorem ipsum" akan menemui banyak tapak web yang masih di peringkat awal. Pelbagai versi telah berkembang selama bertahun-tahun, kadang-kadang secara tidak sengaja, kadang-kadang sengaja (jenaka yang disuntik dan seumpamanya).

Jadi hari ini kita akan bercakap tentang ketelusan dalam html muka surat. Anda mungkin menjumpai blok pop timbul lutsinar, sama ada galeri foto atau borang log masuk di beberapa tapak web popular. Terdapat banyak kegunaan untuk ketelusan dalam HTML. Jadi bagaimana ia dibuat dan di mana ia boleh digunakan?

Baiklah, pertama sekali, mari kita fahami bahawa dokumen kami bukan sahaja mempunyai satu satah monitor - ia biasanya 3 dimensi, saya sebutkan ini dalam artikel "Z-index". Sehubungan itu, walaupun lapisan lutsinar sepenuhnya, jika ia berada di bahagian atas timbunan paparan, akan menyekat akses kepada elemen lain. Ini adalah salah satu kegunaan utama blok lutsinar. Walaupun kesan teduhan biasanya digunakan, lapisan telus sepenuhnya akan berfungsi sama. Jadi, sebagai contoh, banyak galeri foto popular berfungsi; lapisan berlorek diatur di mana foto dan kawalan untuknya dipaparkan. Selebihnya halaman "ditutup" dengan lapisan (separuh) telus, menyekat akses kepada semua elemen lain pada halaman. Itu. Anda tidak akan dapat meninggalkan halaman dengan mengklik mana-mana pautan padanya - semua teks diliputi dengan latar belakang. Untuk kembali ke badan tapak, mereka biasanya menyediakan kawalan untuk menutup galeri, borang log masuk, dsb. Kawal menunjukkan/menyembunyikan blok lutsinar menggunakan javascript. Malangnya, tiada alternatif untuknya. Tanpa menggunakannya, pengguna sama ada tidak akan melihat blok lutsinar sama sekali, atau tidak akan dapat menutupnya tanpa meninggalkan halaman semasa. Saya perhatikan bahawa sifat keterlihatan atau paparan digunakan untuk ini.

Jadi bagaimanakah ketelusan sebenarnya dianjurkan dalam html? Menetapkan ketelusan elemen biasanya tidak disertakan dalam spesifikasi CSS, jadi anda perlu menggunakan beberapa arahan sekaligus untuk menciptanya. Sesetengah pelayar (iaitu) akan berfungsi dengan satu pilihan, yang lain dengan yang lain. Iaitu menggunakan fungsi penapis terbina dalam, pelayar lain menggunakan sifat "opacity", yang ditetapkan dalam julat dari 0 (objek telus sepenuhnya) hingga 1 (legap sepenuhnya). Sebagai contoh, dalam kes ketelusan 30%, anda harus menulis " kelegapan:0.30; penapis: alpha(opacity=30);". Sifat, seperti yang boleh dilihat daripada contoh, adalah serupa - hanya dalam kes pertama nombor dari 0 hingga 1 digunakan, dalam notasi peratusan kedua digunakan. Contoh blok sedemikian:

<gaya div = "kedudukan:mutlak; atas: 0; kiri: 0; warna latar belakang: rgb(18, 114, 214); lebar: 100%; id = "VideoFrame" >

Contoh menggunakan blok paparan video, yang diaktifkan apabila anda mengklik pada lakaran kecil video. Ketinggian blok tidak ditentukan, kerana ia boleh berbeza-beza bergantung pada saiz skrin dan kandungan halaman. Oleh itu, ia dikira secara dinamik semasa membuka video. Contoh menggunakan teknik ini boleh dilihat pada halaman utama laman web ruscircus.ru, yang saya kerjakan pada satu masa.

Itu, sebenarnya, adalah rahsia keseluruhan ketelusan dalam html. Kami menggunakan indeks-z dan kelegapan untuk mencapai kesan telus. Dan anda boleh menemui banyak aplikasi untuk ini - semuanya di sini terhad hanya oleh imaginasi anda.

08.02.2013 Saya akan menjawab soalan yang ditanya dalam komen, iaitu tentang cara membuat legap pada blok telus. Segala-galanya mudah di sini, bukan untuk apa-apa yang saya nyatakan dalam bahan pautan ke bahan tentang indeks z, anda perlu membuat blok lain, dengan indeks z yang lebih tinggi daripada yang telus. Sekarang, dalam beberapa minit, saya melakar satu contoh. Blok:

<gaya div = "kedudukan:mutlak; atas: 0; kiri: 0; warna latar belakang: rgb(18, 114, 214); lebar: 100%; tinggi: 100%; kelegapan:0.30; penapis: alpha(opacity=30); visibility:hidden; indeks-z:1;" id = "VideoFrame" > <div id = gaya "VideoFrame2" = "kedudukan:mutlak; atas: 25%; kiri: 25%; warna latar belakang: putih; lebar: 50%; tinggi: 50%; kelegapan:0.99; penapis: alpha(opacity=99); visibility:hidden; indeks-z:2;" onclick = "javascript:HideForm();" > Di sini kita menulis teks</div>

Dan fungsi javascript

< script type= "text/javascript" >fungsi ShowForm() ( document.getElementById ("VideoFrame") .style .visibility = "visible" ; document.getElementById ("VideoFrame2") .style .visibility = "visible" ; ) function HideForm() ( document.getElementById (" VideoFrame" ) .style .visibility = "tersembunyi" ; document.getElementById ("VideoFrame2") .style .visibility = "tersembunyi" ; )

Fungsi pertama memaparkan blok lutsinar (bersama dengan blok teks legap) - ia boleh diikat pada butang. pautan, dsb.. Fungsi kedua yang saya miliki adalah terikat pada klik tetikus pada blok dengan teks - ia menyembunyikan blok lutsinar.

Saya harap saya telah memberikan sedikit kejelasan tentang cara ini berfungsi. Nah, jika tidak, tanya soalan.