Rumah > Artikel > hujung hadapan web > Cara menggunakan CSS untuk mencipta imej kesan kosong
Cara menggunakan CSS untuk mencipta imej kesan kosong
- 王林asal
- 2023-10-18 09:43:581549semak imbas
Cara menggunakan CSS untuk mencipta gambar kesan kosong
Dalam reka bentuk web, cara mencipta kesan yang unik dan menarik adalah cabaran yang berterusan. meneroka. Antaranya, kesan hollow adalah salah satu teknik yang biasa dan biasa digunakan. Dengan menggunakan CSS, kami boleh menambah kesan kosong pada imej, dengan itu meningkatkan keindahan dan daya tarikan halaman.
Di bawah, kami akan memperkenalkan secara terperinci cara menggunakan CSS untuk mencipta imej dengan kesan kosong dan memberikan contoh kod khusus. Pertama, kita perlu menyediakan imej sebagai imej contoh kita.
- Prinsip asas menggunakan CSS untuk mencapai kesan lompang:
Prinsip melaksanakan kesan lompang ialah menindih imej dengan saiz dan lapisan kedudukan yang sama, dan kemudian mengawal ketelusan supaya lapisan asas boleh dipaparkan, dengan itu mencapai kesan mengosongkan.
- Contoh kod:
bahagian HTML:
<!DOCTYPE html>
<html>
<head>
<title>镂空效果的图片</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="image-container">
<img src="example.jpg" alt="示例图片">
<div class="overlay"></div>
</div>
</div>
</body>
</html>bahagian CSS - style.css:🎜
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.image-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5; /* 可根据需要调整透明度 */
pointer-events: none; /* 使覆盖层不响应用户交互 */
}Dalam contoh kod di atas, kami mencipta bekas div sebagai bekas reka letak halaman. Dalam bekas ini, div bekas imej dicipta untuk mengandungi imej dan tindanan. Tindanan menggunakan position:absolute untuk meletakkannya di atas imej dan menetapkan lebar dan tinggi kepada 100% supaya ia mempunyai saiz dan kedudukan yang sama dengan imej. Dalam gaya tindanan, kami menetapkan warna latar belakang kepada hitam dan mengawal ketelusan dengan melaraskan atribut kelegapan supaya imej di bawah boleh dipaparkan melalui tindanan. Selain itu, kami menggunakan atribut pointer-events untuk menetapkan tindanan supaya tidak bertindak balas kepada interaksi pengguna.
- Gaya tersuai dan pengoptimuman lanjut:
Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencipta imej kesan kosong. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!