Bagaimana cara membuat lapisan tembus pandang? Membuat latar belakang transparan dalam HTML dan CSS (efek opacity dan RGBA) Transparansi dan teks bergerigi di IE
Terkadang menjadi perlu untuk latar belakang transparan untuk blok tertentu pada halaman. Anda dapat mencapai efek ini dengan membuat gambar latar belakang transparan dalam format *.png dan mengaturnya melalui properti latar belakang: url(“./gambar/font.png”);.
Menggunakan Properti OPACITY
Mengapa kesulitan seperti itu, jika itu bisa dilakukan dengan menggunakan CSS. Mari buat blok utama di halaman( halaman) dan blok bersarang ( memblokir), yang akan disetel menjadi transparan. Kompatibilitas lintas-browser dicapai sebagai berikut: properti untuk Internet Explorer – filter: alfa (opacity = 50) (nilai transparansi dalam kisaran dari 0 hingga 100), untuk browser yang mendukung standar CSS3 - opasitas: 0,5 (angka antara 0,0 dan 1,0).
kode HTML:
Latar belakang transparan untuk blok.
Hasil:
Latar belakang transparan untuk blok
Seperti yang Anda lihat, transparansi meluas ke semua elemen turunan.
Latar belakang transparan untuk blok
di DIV dengan kelas memblokir dan mereka tidak dapat melebihi nilai transparansi orang tua mereka. Artinya, semua yang ada di blok ini menjadi transparan. Bagaimana jika Anda perlu meninggalkan latar belakang transparan hanya untuk div?Menggunakan Properti BACKGROUND-COLOR
Kita perlu membuat beberapa perubahan pada tabel gaya css, yaitu ganti untuk blok DIV dengan kelas memblokir Properti kegelapan per properti warna latar belakang.
Div.block ( width:260px; height:140px; margin-top:79px; margin-left:94px; border:1px solid #333333; /* background transparan saja DIV.block */ background-color: rgba(255, 255 , 255, 0,5); /* Warna latar belakang, opasitas 0,5*/ )
Hasil:
Latar belakang transparan untuk blok
Pada contoh di atas, digunakan untuk warna dan latar belakang. format RGBA . Dimana, tiga huruf pertama berdiri untuk merah, hijau, biru (merah, hijau, biru), yang terakhir melambangkan saluran alfa (sebuah) dan himpunan transparansi elemen b dari 0.0 sebelum 1.0 .
Warna latar belakang: rgba(r, g, b, a);
Dalam tanda kurung, alih-alih huruf, nilai komponen warna diletakkan, dapat dilihat di editor grafis apa pun, misalnya Paint.net(tangkapan layar). Nilai terakhir sebuah menetapkan transparansi dan mencocokkan nilai properti kegelapan.
http://cp77.comxa.com/verstka/css-transparent-fon
Dalam pelajaran ini, kita akan melihat ini css properti - kegelapan dan RGBA. Properti Kegelapan bertanggung jawab hanya untuk transparansi elemen, dan fungsinya RGBA- untuk warna dan transparansi, jika Anda menentukan nilai transparansi saluran alfa.
Opasitas CSS
Nilai numerik untuk kegelapan diatur dalam kisaran 0,0 hingga 1,0, di mana nol adalah transparansi penuh, dan satu, sebaliknya, adalah opasitas absolut. Misalnya, untuk melihat transparansi 50%, Anda perlu mengatur nilainya menjadi 0,5. Harus diingat bahwa kegelapan menyebar ke semua elemen anak dari orang tua. Dan ini berarti bahwa teks pada latar belakang tembus cahaya juga akan tembus cahaya. Dan ini sudah merupakan kelemahan yang sangat signifikan, teksnya tidak terlalu menonjol.
Transparansi melalui CSS Opacity
Tangkapan layar dengan jelas menunjukkan bahwa teks hitam telah menjadi setransparan latar belakang biru.
Div(
latar belakang: url(gambar/gambaranda.jpg); /* Gambar latar belakang */
lebar: 750px
tinggi: 100 piksel;
margin: otomatis;
}
.biru(
latar belakang: #027av4; /* Warna background transparan */
opasitas: 0,3 /* Nilai transparansi latar belakang */
tinggi: 70 piksel;
}
h1 (
bantalan: 6px
font-family: Arial Black;
font-weight: lebih tebal;
ukuran font: 50px;
}
Transparansi CSS dalam format RGBA
Format untuk menulis warna RGBA, adalah alternatif properti yang lebih modern kegelapan. R (merah), G (hijau), B (biru) artinya: merah, hijau, biru. surat terakhir SEBUAH- berarti saluran alfa, yang mengatur transparansi. RGBA Tidak seperti Kegelapan tidak mempengaruhi elemen anak.
Sekarang mari kita lihat contoh kita menggunakan RGBA. Mari kita ganti garis-garis ini dalam gaya.
Latar belakang: ##027av4; /* Warna latar belakang */
opasitas: 0,3 /* nilai transparansi latar belakang */
ke baris berikutnya
Latar belakang: rgba(2, 127, 212, 0.3);
Seperti yang Anda lihat, nilai transparansi 0,3 sama untuk kedua metode.
Hasil dari contoh RGBA:
Tangkapan layar kedua terlihat jauh lebih baik daripada yang pertama.
Bermain dengan transparansi latar belakang balok, Anda dapat mencapai efek menarik di situs. Adalah penting bahwa balok-balok tembus pandang ini berada di atas pola warna-warni, seperti foto. Hanya dalam kasus ini efeknya akan terlihat. Teknik ini telah digunakan dalam desain untuk waktu yang lama, bahkan sebelum munculnya apapun CSS3, itu diimplementasikan murni dalam program grafis.
Jika pelanggan memerlukan tata letak agar terlihat bagus di versi browser yang lebih lama Internet Explorer lalu tambahkan properti Saring dan jangan lupa untuk berkomentar agar validitas kode tidak terganggu.
Kesimpulan
Format RGBA mendukung semua browser modern kecuali Internet Explorer. Hal ini juga sangat penting bahwa RGBA fleksibel, ia bertindak hanya pada elemen tertentu yang diberikan, tanpa mempengaruhi anak-anak. Jelas bahwa lebih nyaman bagi pembuat kode. Pilihan saya pasti mendukung format RGBA untuk mendapatkan transparansi dalam css.
Untuk konsolidasi materi yang lebih baik dan kejelasan yang lebih besar, saya sarankan Anda melakukannya.
Properti opacity CSS bertanggung jawab atas transparansi elemen (gambar, teks, blok) dalam html.
Sintaks CSS
opasitas: nilai;
Di mana nilai dapat mengambil nilai nyata dalam kisaran 0,0 hingga 1,0. Nilai 1,0 berarti tidak ada transparansi (default).
Contoh: seperti transparansi dalam html
Contoh 1. gambar transparan di html
Gambar pertama dirender tanpa transparansi, yang kedua dengan transparansi 0,5.
Пример №2. Эффекты с прозрачностью в html
По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.
На странице преобразуется в следующее
Пример №3. Прозрачный блок на изображении в html
Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.
На странице преобразуется в следующее
Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.
Для обращения к opacity из JavaScript нужно писать следующую конструкцию:
object.style.opacity ="VALUE "
Для создания эффекта прозрачности в CSS используется свойство opacity .
Браузер IE8 и более ранние его версии поддерживают альтернативное свойство - filter:alpha(opacity=x) , где " x " может принимать значение от 0 до 100 , чем меньше значение, тем прозрачнее будет элемент.
Все остальные браузеры поддерживают стандартное CSS свойство opacity , которое может принимать в качестве значения числа от 0.0 до 1.0 , чем меньше значение, тем прозрачнее будет элемент:
Mencoba "Arahkan transparansi
Pseudo-class:hover memungkinkan Anda untuk mengubah penampilan elemen saat melayang di atasnya dengan kursor mouse. Kami akan menggunakan fitur ini untuk membuat gambar kehilangan transparansi saat mengarahkan kursor:
Mencoba "Transparansi latar belakang
Ada dua kemungkinan cara buat elemen transparan: properti opacity yang dijelaskan di atas, dan tentukan warna latar belakang dalam format RGBA.
Anda mungkin sudah familiar dengan model representasi warna RGB. RGB (Merah, Hijau, Biru - merah, hijau, biru) - sistem warna yang menentukan rona dengan mencampurkan merah, hijau, dan biru. Misalnya, untuk mengatur warna teks menjadi kuning, Anda dapat menggunakan salah satu dari deklarasi berikut:
Warna: rgb(255,255,0); warna: rgb(100%,100%,0);
Warna yang ditentukan dengan RGB akan berbeda dari nilai hex yang telah kami gunakan sejauh ini karena memungkinkan saluran alfa transparansi digunakan. Ini berarti bahwa apa yang ada di bawahnya akan ditampilkan melalui latar belakang elemen dengan transparansi alfa.
Deklarasi warna RGBA serupa dalam sintaks dengan aturan RGB standar. Namun, antara lain, kita perlu mendeklarasikan nilai sebagai RGBA (bukan RGB) dan menetapkan nilai transparansi desimal tambahan setelah nilai warna antara 0,0 (transparan penuh) dan 1 (buram penuh).
Warna: rgba(255,255,0,0.5); warna: rgba(100%,100%,0,0.5);
Perbedaan antara properti opacity dan RGBA adalah bahwa properti opacity menerapkan transparansi ke seluruh elemen, yaitu seluruh konten elemen menjadi transparan. Dan RGBA memungkinkan Anda mengatur transparansi untuk setiap bagian elemen (misalnya, hanya teks atau latar belakang):
Body ( background-image: url(img.jpg); ) .prim1 ( width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter : alpha(opacity=70); /*untuk IE8 dan sebelumnya*/ text-align: center; ) .prim2 ( width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid hitam; font-weight: bold; text-align: center; ) Coba »
Catatan: Nilai RGBA tidak didukung di IE8 dan sebelumnya. Untuk mendeklarasikan penggantian warna untuk browser lama yang tidak mendukung nilai warna dengan saluran alfa, tentukan terlebih dahulu sebelum nilai RGBA: background: rgb(255,255,0); latar belakang: rgba(255,255,0,0.5);
Membuat latar belakang transparan dalam HTML dan CSS ( efek opasitas dan RGBA)
efek tembus cahaya elemen terlihat jelas di gambar latar belakang dan telah tersebar luas di berbagai sistem operasi karena terlihat stylish dan cantik. Hal utama adalah tidak memiliki pola monokromatik di bawah blok tembus cahaya, tetapi gambar, dalam hal ini transparansi menjadi terlihat.
Efek ini tercapai cara yang berbeda, termasuk teknik kuno seperti menggunakan gambar PNG sebagai latar belakang, membuat gambar kotak-kotak, dan menggunakan properti opacity. Tetapi begitu diperlukan untuk membuat latar belakang tembus cahaya di blok, metode ini memiliki kelemahan yang tidak menyenangkan.
Pertimbangkan transparansi teks dan latar belakang - cara menggunakannya dengan benar dalam desain situs web:
Fitur utama dari properti ini adalah bahwa nilai transparansi mempengaruhi semua elemen anak di dalamnya, bukan hanya latar belakang. Ini berarti bahwa latar belakang dan teks akan menjadi transparan. Anda dapat meningkatkan tingkat transparansi dengan mengubah perintah opacity dari 0.1 menjadi 1.
HTML 5 CSS 3 IE 9
Dalam desain web, transparansi parsial juga digunakan dan dicapai melalui format warna RGBA, yang diatur hanya untuk latar belakang elemen.
Biasanya dalam desain, hanya latar belakang elemen yang harus tembus cahaya, dan teks harus buram agar tetap dapat dibaca. Properti opacity tidak cocok di sini karena teks di dalam elemen juga sebagian transparan. Yang terbaik adalah menggunakan format RGBA, di mana saluran alfa, atau dengan kata lain nilai transparansi, adalah bagiannya. Nilai 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 sepenuhnya transparan dan 1 buram, sintaks untuk menerapkan rgba.
Latar belakang semi-transparan HTML 5 CSS 3 IE 9
