Imej CSS telus/legap
Imej CSSTelus/Legap
Mudah untuk mencipta imej lutsinar menggunakan CSS.
NOTA : Sifat CSS Opacity ialah sebahagian daripada pengesyoran CSS3 W3C.
Contoh 1 - Mencipta Imej Telus
Sifat ketelusan dalam CSS3 ialah kelegapan.
Pertama, kami akan menunjukkan kepada anda cara Cipta imej telus dengan CSS.
Imej biasa
Imej yang sama dengan ketelusan:
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>Jalankan program dan lihat
Lihat CSS berikut:
{
opacity:0.4;
penapis: alpha(opacity=40); /* Untuk IE8 dan sebelumnya */
}
Pelayar IE9, Firefox, Chrome, Opera dan Safari boleh menggunakan atribut ketelusan pada Imej menjadi legap. Nilai atribut kelegapan antara 0.0 - 1.0. Nilai yang lebih kecil menjadikan elemen lebih telus.
IE8 dan versi terdahulu menggunakan penapis: alpha (opacity= x). Nilai x boleh diambil adalah dari 0 - 100. Nilai yang lebih rendah menjadikan elemen lebih telus.
Contoh 2 - Ketelusan Imej - Kesan Tuding
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>Gaya CSS:
{
opacity:0.4;
filter:alpha(opacity=40); /* Untuk IE8 dan sebelumnya */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100);
Blok CSS pertama adalah serupa dengan kod dalam Contoh 1. Selain itu, kami telah menambah perkara yang berlaku apabila pengguna menuding pada salah satu imej. Dalam kes ini, kami mahu imej menjadi jelas apabila pengguna menuding di atasnya.
CSS ini ialah: opacity=1.
IE8 dan penggunaan terdahulu: filter:alpha(opacity=100).
Apabila penunjuk tetikus menjauhkan diri daripada imej, imej akan mendapat semula ketelusan.
Contoh 3 - Teks dalam kotak lutsinar
Teks berada dalam kotak lutsinar. Teks berada dalam kotak lutsinar. Teks berada dalam kotak lutsinar. Teks berada dalam kotak lutsinar. Teks berada dalam kotak lutsinar. Teks berada dalam kotak lutsinar. Teks berada dalam kotak lutsinar. Teks berada dalam kotak lutsinar. Teks berada dalam kotak lutsinar. Teks berada dalam kotak lutsinar. Teks berada dalam kotak lutsinar. Teks berada dalam kotak lutsinar. Teks berada dalam kotak lutsinar.
Kod sumber adalah seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div.background
{
width:500px;
height:250px;
background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color: #fcffe0;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>人生就像一張紙，行走間，如素箋染墨。每一次經(jīng)歷都是一筆濃墨或淡彩;每一次成功或挫折，每一次心跳都是一個(gè)不同凡響的音符，淡然或張狂，如那枝上的鳥兒，可以自由戀愛，傾心歡唱，即使這素淡的冬日，也有余韻繞梁……
</p>
</div>
</div>
</body>
</html>Jalankan program dan cuba
