| Contoh 3 TUBUH ( latar belakang: url(http://www.uarating.com/news/wp-content/uploads/2016/05/flowers-04-may-2016.jpg) tanpa pengulangan; ukuran latar:100% ; ) .block( background-color: rgba(255, 228, 196, 0.88); padding: 25px; text-align:center; ) Di toko kami, Anda akan menemukan semua jenis warna.
Perhatikan bahwa konten teks blok terlihat sepenuhnya (100% hitam), sedangkan latar belakang diatur ke saluran alfa 0,88, yaitu. 88%.
Ini mengakhiri publikasi. Berlangganan blog saya dan jangan lupa undang teman. Saya harap Anda beruntung dalam mempelajari bahasa web! Sampai jumpa!
/* 06.07.2006 */
Transparansi CSS (opasitas css, opacity javascript) Efek transparansi adalah topik artikel ini. Jika Anda tertarik mempelajari cara membuat elemen halaman HTML transparan menggunakan CSS atau Javascript, dan cara mencapai kompatibilitas lintas-browser (pengalaman yang sama di browser berbeda) dengan mempertimbangkan browser Firefox, Internet Explorer, Opera, Safari, Konqueror, maka Anda dipersilakan. Selain itu, mari kita lihat solusi siap pakai untuk mengubah transparansi secara bertahap menggunakan javascript. Opacity CSS (transparansi CSS) Simbiosis opacity CSS Yang saya maksud dengan simbiosis adalah menggabungkan gaya berbeda untuk browser berbeda dalam satu aturan CSS untuk mencapai efek yang diinginkan, yaitu. untuk menerapkan kompatibilitas lintas-browser. Filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* YAITU 5.5+*/ -moz-opacity: 0,5; /* Mozilla 1.6 dan di bawahnya */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */ /* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */ Faktanya, aturan pertama dan terakhir diperlukan, untuk IE5.5+ dan browser yang memahami opacity CSS3, dan dua aturan di tengah jelas tidak membuat perbedaan, tetapi juga tidak terlalu mengganggu (putuskan sendiri apakah Anda membutuhkannya). Simbiosis opasitas Javascript Sekarang mari kita coba mengatur transparansi melalui skrip, dengan mempertimbangkan fitur berbagai browser yang dijelaskan di atas. Fungsi setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Jika tidak ada elemen dengan id atau browser yang ditentukan tidak mendukung salah satu fungsi yang diketahui untuk mengontrol transparansi if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // Jika transparansi sudah disetel, ubah melalui kumpulan filter , jika tidak tambahkan transparansi melalui style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += " progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // Agar tidak menimpa filter lain, gunakan "+=" ) else // Browser lain elem.style = nOpacity; ) function getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // Sesuai dengan CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) mengembalikan "opacity"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 dan versi lebih lama, Firefox 0.8 mengembalikan "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 mengembalikan "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ mengembalikan "filter"; kembali salah; //tidak ada transparansi) Fungsi ini mengambil dua argumen: sElemId - id elemen, nOpacity - bilangan real dari 0,0 hingga 1,0 yang menentukan transparansi dalam gaya opacity CSS3.
Saya rasa ada baiknya menjelaskan bagian IE dari kode fungsi setElementOpacity. Var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elemen.filter.alpha; jika (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+""); Orang mungkin bertanya-tanya mengapa tidak mengatur transparansi dengan menetapkan (=) ke properti elem.style.filter = "..."; ? Mengapa "+=" digunakan untuk menambahkan properti filter ke akhir string? Jawabannya sederhana, agar tidak “menimpa” filter lainnya. Namun pada saat yang sama, jika Anda menambahkan filter dengan cara ini untuk kedua kalinya, itu tidak akan mengubah nilai yang ditetapkan sebelumnya dari filter ini, tetapi hanya akan ditambahkan ke akhir baris properti, dan ini tidak benar. Oleh karena itu, jika filter sudah terpasang, maka Anda perlu memanipulasinya melalui kumpulan filter yang diterapkan ke elemen: elem.filters (tetapi perlu diingat bahwa jika filter belum ditetapkan ke elemen, maka tidak mungkin untuk mengelolanya melalui koleksi ini). Elemen koleksi dapat diakses berdasarkan nama filter atau indeks. Namun, filter dapat ditentukan dalam dua gaya, gaya pendek IE4, atau gaya IE5.5+, yang diperhitungkan dalam kode. Mengubah transparansi suatu elemen dengan lancar Solusi siap pakai. Kami menggunakan perpustakaan opacity.js img ( filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) // Buat aturan untuk mengubah transparansi: tetapkan nama aturan, transparansi awal dan akhir, sebagai serta penundaan parameter opsional yang mempengaruhi kecepatan perubahan transparansi fadeOpacity.addRule("oR1", .3, 1, 30);  fadeOpacity(ini.id, "oR1") " onmouseout="fadeOpacity.back(ini.id) " src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(ini.id, "oR1") " onmouseout="fadeOpacity.back(ini.id) " src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(ini.id, "oR1") " onmouseout="fadeOpacity.back(ini.id) " src="/img/sweet_cherry.jpg" width="98" height="97" /> Langkah-langkah dasar: Kami menghubungkan perpustakaan fungsi;
Kami mendefinisikan aturan menggunakan metode fadeOpacity.addRule();
Kita memanggil metode fadeOpacity() untuk mengubah transparansi dari nilai awal ke nilai akhir, atau fadeOpacity.back() untuk kembali ke nilai awal tingkat transparansi. Ayo kunyah Cara menghubungkan perpustakaan menurut saya bisa dilihat dari contoh di atas. Sekarang perlu dijelaskan definisi aturan. Sebelum memanggil metode untuk mengubah transparansi dengan lancar, Anda perlu menentukan aturan yang digunakan untuk melakukan proses: Anda perlu menentukan transparansi awal dan akhir, dan juga, jika diinginkan, menentukan parameter penundaan yang memengaruhi kecepatan proses mengubah transparansi.
Aturan ditentukan menggunakan metode fadeOpacity.addRule
Sintaks: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)
Argumen:
- sRuleName - nama aturan, ditetapkan secara sewenang-wenang;
- nStartOpacity dan nFinishOpacity - transparansi awal dan akhir, angka berkisar antara 0,0 hingga 1,0;
- nDelay - penundaan dalam milidetik (argumen opsional, defaultnya adalah 30).
Kami menyebut transparansi memudar sendiri melalui metode fadeOpacity (sElemId, sRuleName), di mana sElemId adalah id elemen, dan sRuleName adalah nama aturannya. Untuk mengembalikan transparansi ke keadaan semula, gunakan metode fadeOpacity.back(sElemId). : arahkan kursor untuk mengubah transparansi dengan mudah Saya juga akan mencatat bahwa untuk perubahan transparansi yang sederhana (tetapi bukan perubahan bertahap), :hover pseudo-selector sudah tepat, yang memungkinkan Anda menentukan gaya untuk suatu elemen saat Anda mengarahkan mouse ke atasnya. a:hover img ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; ) 
Harap dicatat bahwa gambar ditempatkan di dalam elemen A. Faktanya adalah bahwa Internet Explorer hingga versi 6 memahami pseudo-selector:hover, hanya dalam kaitannya dengan tautan, dan bukan pada elemen apa pun, sebagaimana seharusnya dalam CSS (situasinya telah diperbaiki di IE7). Transparansi dan teks bergerigi di IE Dengan dirilisnya Windows XP, penghalusan font layar menggunakan metode ClearType muncul, dan bersamaan dengan itu, efek samping di IE saat menggunakan metode anti-aliasing ini. Mengenai kasus kami, jika transparansi diterapkan ke elemen dengan teks ketika metode anti-aliasing ClearType diaktifkan, maka teks tersebut tidak lagi ditampilkan secara normal (teks tebal, misalnya, ganda, berbagai artefak juga dapat muncul, misalnya, di bentuk tanda hubung, teks bergerigi). Untuk memperbaiki situasi ini, untuk IE Anda perlu mengatur warna latar belakang, properti CSS background-color , ke elemen yang transparansinya diterapkan. Untungnya, bug tersebut telah diperbaiki di IE7.
Dalam pelajaran ini kita akan melihat properti CSS berikut - opacity dan RGBA. Properti Opacity hanya bertanggung jawab atas transparansi elemen, dan fungsi RGBA bertanggung jawab atas warna dan transparansi jika Anda menentukan nilai transparansi saluran alfa. Transparansi CSS Opasitas Nilai digital untuk opacity diatur dalam kisaran dari 0,0 hingga 1,0, di mana nol adalah transparansi penuh, dan satu, sebaliknya, adalah opacity absolut. Misalnya, untuk melihat transparansi 50%, Anda perlu menyetel nilainya menjadi 0,5. Perlu diingat bahwa opacity berlaku untuk semua elemen anak dari induk. Artinya, teks dengan latar belakang transparan juga akan transparan. Dan ini adalah kelemahan yang sangat signifikan; teksnya tidak terlalu menonjol.
Transparansi melalui Opacity CSS
Tangkapan layar dengan jelas menunjukkan bahwa teks hitam menjadi tembus cahaya seperti latar belakang biru. Div(
latar belakang: url(gambar/gambaranda.jpg); /* Gambar latar belakang */
lebar: 750 piksel;
tinggi: 100 piksel;
margin: otomatis;
}
.biru(
latar belakang: #027av4; /* Warna latar belakang tembus pandang */
opacity: 0,3; /* Nilai tembus latar belakang */
tinggi: 70 piksel;
}
jam1 (
bantalan: 6 piksel;
keluarga font: Arial Black;
font-weight: lebih tebal;
ukuran font: 50px;
} Transparansi CSS dalam format RGBA Format warna RGBA adalah alternatif yang lebih modern dibandingkan properti opacity. R (merah), G (hijau), B (biru) – artinya: merah, hijau, biru. Huruf terakhir A adalah singkatan dari saluran alfa, yang mengatur transparansi. RGBA, tidak seperti Opacity, tidak mempengaruhi elemen anak.
Sekarang mari kita lihat contoh kita menggunakan RGBA. Mari kita ganti garis-garis ini di style. Latar Belakang: ##027av4; /* Warna latar belakang */
opacity: 0,3; /* nilai tembus latar belakang */
ke satu baris berikutnya Latar Belakang: rgba(2, 127, 212, 0.3); Seperti yang Anda lihat, nilai transparansi 0,3 sama untuk kedua metode. Hasil contoh RGBA: Tangkapan layar kedua terlihat jauh lebih baik daripada yang pertama.
Dengan bermain-main dengan latar belakang blok yang tembus cahaya, Anda dapat mencapai efek menarik di situs web Anda. Balok tembus pandang ini harus diletakkan di atas desain warna-warni, seperti foto. Hanya dalam hal ini efeknya akan terlihat. Teknik ini telah digunakan dalam desain sejak lama, bahkan sebelum munculnya CSS3, teknik ini diterapkan murni dalam program grafis.
Jika pelanggan mengharuskan tata letak terlihat bagus di browser Internet Explorer versi lama, tambahkan properti filter dan jangan lupa berkomentar agar validitas kode tidak terpengaruh.
.biru(
latar belakang: rgba(0, 120, 201, 0.3);
filter: alfa(Opasitas=30); /* Transparansi di IE */
}
Kesimpulan Format RGBA didukung oleh semua browser modern, kecuali Internet Explorer. RGBA juga sangat penting untuk bersifat fleksibel; ia hanya bekerja pada elemen tertentu, tanpa memengaruhi elemen turunannya. Jelas bahwa ini lebih nyaman bagi perancang tata letak. Pilihan saya jelas mendukung format RGBA untuk mencapai transparansi dalam CSS.
Untuk konsolidasi materi yang lebih baik dan kejelasan yang lebih besar, saya sarankan Anda mempelajarinya. Membuat latar belakang transparan dalam HTML dan CSS (efek opacity dan RGBA) Efek tembus cahaya suatu elemen terlihat jelas pada gambar latar belakang dan telah tersebar luas di berbagai sistem operasi karena tampilannya yang gaya dan indah. Hal utama adalah tidak memiliki pola monokromatik di bawah blok tembus cahaya, tetapi sebuah gambar; dalam hal ini transparansi menjadi terlihat.
Efek ini dicapai dengan berbagai cara, termasuk metode kuno seperti menggunakan gambar PNG sebagai latar belakang, membuat gambar kotak-kotak, dan properti opacity. Namun begitu ada kebutuhan untuk membuat latar belakang tembus pandang pada sebuah blok, metode ini memiliki kelemahan yang tidak menyenangkan.
Mari kita lihat transparansi teks dan latar belakang - cara menggunakannya dengan benar dalam desain situs web:
Fitur utama dari properti ini adalah nilai transparansi mempengaruhi semua elemen anak di dalamnya, bukan hanya latar belakang. Ini berarti latar belakang dan teks akan menjadi tembus cahaya. Anda dapat meningkatkan tingkat transparansi dengan mengubah perintah opacity dari 0,1 menjadi 1. HTML 5 CSS 3 IE 9 badan opacity ( background: url(images/cat.jpg); ) div ( opacity: 0.6; background: #fc0; /* Warna latar belakang */ padding: 5px; /* Margin di sekitar teks */ ) Pembuatan dan promosi situs web di Internet Dalam desain web, transparansi parsial juga digunakan dan dicapai melalui format warna RGBA, yang disetel hanya untuk latar belakang elemen.
Biasanya dalam sebuah desain, hanya latar belakang suatu elemen yang harus tembus cahaya, dan teksnya harus buram agar tetap mudah dibaca. Properti opacity tidak cocok di sini karena teks di dalam elemen juga sebagian transparan. Sebaiknya gunakan format RGBA, yang memiliki saluran alfa, atau dengan kata lain, nilai transparansi sebagai bagiannya. Nilainya ditulis rgba, kemudian nilai komponen warna merah, biru, dan hijau dicantumkan dalam tanda kurung, dipisahkan dengan koma. Terakhir adalah transparansi, yang diatur dari 0 hingga 1, dengan 0 berarti transparansi penuh, dan 1 opacity warna - sintaks untuk menggunakan rgba. Latar belakang semi-transparan HTML 5 CSS 3 IE 9 rgba body ( latar belakang: url(images/cat.jpg); ) div ( latar belakang: rgba(0, 170, 238, 0.4); /* Warna latar belakang */ warna: #fff ; /* Warna teks */ padding: 5px; /* Margin di sekitar teks */ ) Pembuatan dan promosi situs web di Internet. Opacity latar belakang diatur ke 90% - latar belakang semi-transparan dan teks buram.
Transparansi CSS - solusi lintas browser - 3,8 dari 5 berdasarkan 6 suara
Dalam pelajaran ini, kita akan melihat transparansi CSS, mempelajari cara memberikan transparansi ke berbagai elemen halaman dan mencapai kompatibilitas lintas-browser penuh, yaitu efek ini akan bekerja sama di browser yang berbeda. Cara mengatur transparansi elemen apa pun Di CSS3, properti opacity bertanggung jawab untuk membuat elemen transparan, yang dapat diterapkan ke elemen apa pun. Properti ini memiliki nilai dari 0 hingga 1, yang menentukan tingkat transparansi. Dimana 0 adalah transparansi penuh (nilai default untuk semua elemen), dan 1 adalah opacity penuh. Nilai ditulis sebagai pecahan: 0,1, 0,2, 0,3, dst.
Contoh penggunaan:
Transparansi .im ( filter: alpha(Opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; )
Transparansi lintas browser Tidak semua browser memahami dan mengimplementasikan properti opacity di atas dengan cara yang sama. Dalam beberapa kasus, perlu menggunakan nama properti atau filter yang berbeda.
Properti opacity CSS3 didukung oleh jenis browser berikut: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.
Bagus sekali :) browser seperti Internet Explorer hingga versi 9.0 tidak mendukung properti opacity dan untuk membuat transparansi pada browser ini Anda perlu menggunakan properti filter dan nilai alpha(Opacity=X), di mana X adalah bilangan bulat rentang dari 0 hingga 100, yang menentukan tingkat transparansi. 0 sepenuhnya transparan dan 100 sepenuhnya buram.
Pada Firefox sebelum versi 3.5, ia mendukung properti -moz-opacity, bukan opacity.
Browser seperti Safari 1.1 dan Konqueror 3.1, dibangun di atas mesin KHTML, menggunakan properti -khtml-opacity untuk mengontrol transparansi.
Bagaimana cara mengatur transparansi di CSS agar terlihat sama di semua browser? Untuk membuat solusi lintas-browser untuk transparansi elemen, mereka perlu menentukan tidak hanya satu properti opacity, namun kumpulan properti berikut:
filter: alfa(Opasitas=50); /* Transparansi untuk IE */ -moz-opacity: 0.5; /* Mendukung Mozilla 3.5 dan di bawahnya */ -khtml-opacity: 0.5; /* Mendukung Konqueror 3.1 dan Safari 1.1 */ opacity: 0.5; /* Mendukung semua browser lain */ Transparansi berbagai elemen Mari kita lihat beberapa contoh pengaturan transparansi pada elemen tertentu yang paling sering digunakan pada halaman.
Transparansi gambar CSS.
Mari kita lihat beberapa opsi untuk membuat gambar tembus pandang. Pada contoh berikut, gambar pertama tidak diatur transparansinya, gambar kedua memiliki transparansi 50%, dan gambar ketiga memiliki 30%.
Transparansi .im1 ( filter: alpha(Opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; ) .im2 ( filter: alpha(Opacity=30); -moz-opacity: 0.3 ; -khtml-opasitas: 0,3; opasitas: 0,3; )
Hasil:
Transparansi dalam CSS saat mengarahkan kursor ke gambar.
Seringkali kita perlu membuat gambar atau elemen lainnya menjadi transparan saat kursor melayang di atasnya. Anda dapat melakukan ini menggunakan kelas semu CSS: hover. Untuk melakukan ini, gambar kita perlu diberi dua kelas, satu normal - ini akan menjadi keadaan gambar tidak aktif dan kelas kedua dengan kelas semu: arahkan kursor, di sini Anda perlu menentukan transparansi gambar saat ini untuk mengarahkan kursor.
Transparansi .im1 ( filter: alpha(Opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; ) .im1:hover ( filter: alpha(Opacity=50); -moz-opacity : 0,5; -khtml-opacity: 0,5; opacity: 0,5; ) .im2 ( filter: alpha(Opacity=30); -moz-opacity: 0,3; -khtml-opacity: 0,3; opacity: 0,3; ) .im2:hover ( filter: alpha(Opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; )
Anda dapat melihat hasilnya di demo.
Transparansi latar belakang menggunakan CSS.
Di sini perlu diingat bahwa transparansi berlaku untuk semua elemen yang disarangkan dan mereka tidak dapat memiliki transparansi yang lebih besar daripada elemen yang disarangkan.
Sebagai contoh, kami akan memberikan varian dengan background halaman yang dibuat menggunakan gambar dan blok dengan background yang dibuat menggunakan warna dan memiliki transparansi 50%.
Kode sampel:
Transparansi BODY ( latar belakang: url(bg.png); /* Gambar sebagai latar belakang */ ) .blok ( latar belakang: #FC0; /* Warna latar belakang */ padding: 5px; /* Padding */ warna: #000000; /* Warna teks */ filter: alpha(Opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; ) Teks
Berikut hasil kode yang diposting di atas:
| 
