Kecelakan/Kehalusan CSS
- Halaman sebelumnya Pseudo-Element CSS
- Halaman berikutnya Baru navigasi CSS
kecerahan Sifat menentukan kejelasan/kehalusan elemen.
imej jelas
kecerahan Range nilai sifat opacity adalah 0.0-1.0. Nilai yang lebih rendah, semakin jelas:
opacity 0.2
opacity 0.5
kecerahan 1
Contoh
img {
kecerahan: 0.5;
}
kesan lebur jelas
kecerahan Sifat biasanya digunakan bersama-sama :hover Penggunaan pemilih bersama-sama, sehingga boleh mengubah kejelasan apabila kursor berada di atas:
Contoh
img {
kecerahan: 0.5;
}
img:hover {
opacity: 1.0;
}
Pengertian contoh
Blok CSS pertama hampir sama seperti kod di contoh 1. Selain itu, kami turut menambahkan kesan apabila pengguna melepaskan kursor di atas salah satu imej. Dalam keadaan ini, apabila pengguna melepaskan kursor di atas imej, kami mahu imej untuk tidak jelas. Baris CSS ini adalah kecerahan:1;.
Ketika pengecas tetikus meninggalkan imej, imej akan kembali ke kecerahan.
Contoh kesan terbalik saat hover:
Contoh
img:hover {
kecerahan: 0.5;
}
kotak transparen
dengan kecerahan Ketika atribut kecerahan digunakan untuk menambah kadar kecerahan latar bagi elemen, semua anak elemen akan mewarisi kadar kecerahan yang sama. Ini mungkin akan membuat teks yang berada di dalam elemen yang penuh kecerahan sukar untuk dibaca:
Contoh
div {
kecerahan: 0.3;
}
Kadar kecerahan dengan RGBA
Jika anda tidak mahu melaksanakan kadar kecerahan kepada anak element, seperti contoh di atas, gunakan nilai warna RGBA. Contoh di bawah ini menetapkan warna latar bukannya kadar kecerahan teks:
Anda telah belajar dari Warna CSS Dalam bab ini, kita belajar tentang penggunaan RGB sebagai nilai warna. Selain RGB, nilai warna warna merah, hijau dan biru boleh digunakan bersamaan dengan channel alpha (RGBA) - channel ini menentukan kadar kecerahan warna.
Warna RGBA dinyatakan seperti: rgba(merah, hijau, biru, alpha) alpha Parameter adalah nombor yang antara 0.0 (sangat transparen) dan 1.0 (sangat tak transparen).
Petunjuk:Anda akan belajar di dalam Warna CSS Dalam bab ini, kita belajar lebih banyak tentang warna RGBA.
Contoh
div {
latar: rgba(76, 175, 80, 0.3) /* kadar kecerahan 30% latar hijau */
}
Teks di dalam kotak transparen
Ini adalah teks yang berada di dalam kotak transparen.
Contoh
<html>
<head>
<style>
div.background {
latar: url(klematis.jpg) ulang;
sambungan: 2px solid hitam;
}
div.transbox {
marjin: 30px;
warna latar: #ffffff;
sambungan: 1px solid hitam;
kecerahan: 0.6;
}
div.transbox p {
marjin: 5%;
tebal;
warna: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Ini adalah beberapa teks yang berada di dalam kotak jelas.</p>
</div>
</div>
</body>
</html>
Pengertian contoh
Pertama, kami buat elemen <div> dengan imej latar dan garisan tepi (class="background").
Kemudian, kami buat satu lagi div di dalam div pertama (class="transbox").
Dengan warna latar dan garisan tepi - div ini adalah jelas.
Dalam div yang jelas, kami menambahkan beberapa teks di dalam elemen <p>.
- Halaman sebelumnya Pseudo-Element CSS
- Halaman berikutnya Baru navigasi CSS
