Cara menggunakan CSS untuk mencipta imej kesan kosong-tutorial css-php.cn

Cara menggunakan CSS untuk mencipta imej kesan kosong

王林

Lepaskan： 2023-10-18 09:43:58

asal

1646 orang telah melayarinya

Cara menggunakan CSS untuk mencipta imej kesan kosong

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>

Salin selepas log masuk

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; /* 使覆盖层不响应用户交互 */
}

Salin selepas log masuk

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.

Contoh kod di atas hanyalah contoh kesan kosong asas, kita boleh menyesuaikannya mengikut kita sendiri keperluan dan keperluan estetik untuk pengoptimuman dan penyesuaian selanjutnya.

Anda boleh mencapai kesan lompang yang berbeza dengan melaraskan ketelusan, warna latar belakang, bentuk dan jidar tindanan. Anda juga boleh menggunakan kesan peralihan CSS3 dan kesan animasi untuk menambah beberapa kesan dinamik pada imej berongga untuk menjadikan halaman lebih jelas dan menarik.

Ringkasan:

Menggunakan CSS untuk mencipta imej dengan kesan kosong ialah kaedah yang agak mudah dan berkesan yang boleh digunakan untuk menambah beberapa sorotan visual pada imej statik. Dengan menguasai prinsip asas dan menggunakan kod yang betul, kami boleh membuat gambar kesan kosong pelbagai gaya dan bentuk secara fleksibel. Saya harap artikel di atas dapat membantu dan memberi inspirasi kepada semua orang!

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!