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>人生就像一张纸，行走间，如素笺染墨。每一次经历都是一笔浓墨或淡彩;每一次成功或挫折，每一次心跳都是一个不同凡响的音符，淡然或张狂，如那枝上的鸟儿，可以自由恋爱，倾心欢唱，即使这素淡的冬日，也有余韵绕梁……
</p>
</div>
</div>
</body>
</html>Jalankan program dan cuba
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
