Rumah >hujung hadapan web >tutorial css >Bagaimana untuk meletakkan imej atau video di dalam bayang?
Bagaimana untuk meletakkan imej atau video di dalam bayang?
- 王林ke hadapan
- 2023-09-12 17:29:021321semak imbas
Anda mungkin pernah melihat imej atau video yang dimainkan sebagai siluet di beberapa tapak web. Siluet boleh menjadi imej, objek, orang atau haiwan dan diwakili dalam warna hitam, menggariskan subjek. Kita boleh masukkan mana-mana imej atau video dalam siluet supaya video atau imej itu akan muncul dalam warna siluet
Dalam artikel ini, kita akan belajar cara meletakkan imej atau video ke dalam bayang.
Bagaimana untuk meletakkan objek di dalam garis besar?
Siluet ialah imej objek atau orang yang diwakili oleh bentuk pepejal dalam warna hitam atau mana-mana warna palet lain. Sekarang, atribut yang akan kami gunakan di sini ialah atribut campuran-campuran, yang menentukan cara kandungan elemen tertentu diadun dengan elemen induk terdekatnya.
Tatabahasa
Berikut ialah sintaks untuk menggunakan atribut campuran-campuran -
mix-blend mode: =darken,multiply,normal;
Mod campuran adunan mempunyai nilai seperti Normal, Darab, Skrin dan Gelap, masing-masing mengubah hubungan adunan dengan induk terdekatnya. Mari lihat contoh untuk lebih memahami sifat campuran ini.
Contoh
Dalam contoh di bawah, kami mencipta tiga bekas dan kemudian menyediakannya dengan tiga kelas berbeza. Kemudian dalam bahagian CSS kami menukar lebar dan tinggi serta jejari sempadan untuk menjadikannya bulatan, dan kemudian menukar warna semua bulatan. Kod output yang dijangkakan adalah seperti berikut -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of using the mix-blend property</title>
<style>
.round {
border-radius: 50%;
width: 79px;
mix-blend-mode: screen;
height: 79px;
position: absolute;
}
.round-one {
background: red;
}
.round-second {
left: 38px;
background: yellow;
}
.round-third {
left: 19px;
background: blue;
top: 39px;
}
.iso {
position: relative;
Isolation: isolate;
}
</style>
</head>
<body>
<div class="isolate">
<div class="round round-one"></div>
<div class="round round-two"></div>
<div class="round round-third"></div>
</div>
</body>
</html>
Seperti yang anda lihat, dengan menggunakan sifat campuran-campuran, kami mencampurkan bulatan di atas dengan 2 warna yang berbeza.
Sekarang kami tahu cara atribut mod gabungan berfungsi, kami akan meletakkan imej atau video dalam siluet dan memastikan kami mempunyai sumber yang kami perlukan untuk melakukan ini. Mari lihat bahagian kod dan lihat cara memasukkan imej atau video dalam siluet.
Contoh
Dalam contoh ini, kami akan menambah imej dalam imej siluet menggunakan sifat Blend Blend Mode.
Di sini kami mula-mula menambah imej siluet dan kemudian imej yang ingin diadun. Seterusnya, kami membungkusnya di bawah div dan memberi mereka kelas. Selepas itu pergi ke bahagian CSS dan gunakan sifat mod campuran-campuran pada imej yang kami tambah dan tetapkan nilai pada skrin. Mari kita lihat output yang akan kita peroleh menggunakan kod berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of the silhoutte property</title>
<style>
.con {
justify-content: center;
display: flex;
align-items: center;
}
body {
min-height: 99vh;
}
.con .main {
position: relative;
width: 399px;
margin: 48px;
height: 399px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.con .main img {
top: 0;
left: 0;
position: absolute;
width: 98%;
mix-blend-mode: screen;
height: 99%;
object-fit: cover;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<div class="con">
<div class="main">
<img src="https://www.tutorialspoint.com/static/images/banner-img.png?v=2.001" / alt="Bagaimana untuk meletakkan imej atau video di dalam bayang?" >
<img src="https://www.tutorialspoint.com/images/logo.png" / alt="Bagaimana untuk meletakkan imej atau video di dalam bayang?" >
</div>
</div>
</body>
</html>
Anda boleh lihat dalam output di atas bahawa kami menambah imej siluet dan kemudian imej lain dan apabila kami menggunakan sifat Blend Blend Mode imej itu sebati dengan siluet dan ia kelihatan seperti imej yang sama bukannya 2 imej yang berbeza.
Nota - Kami boleh menggunakan atribut mod campuran campuran untuk teks, imej dan Penyemak Imbas SVG yang menyokong atribut mod campuran campuran termasuk chrome, edge, safari, Firefox, dsb. p>
Kesimpulan
Kesan siluet boleh digunakan untuk menjadikan tapak web lebih interaktif dan menarik, serta boleh dilakukan dengan hanya menggunakan satu sifat dalam CSS, sifat campuran campuran, yang mentakrifkan cara kandungan digabungkan dengan latar belakang ibu bapa dan ibu bapa yang terdekat.
Dalam artikel ini, kami belajar cara meletakkan imej atau video ke dalam bayang menggunakan beberapa sifat CSS seperti sifat Blend Blend Mode.
Atas ialah kandungan terperinci Bagaimana untuk meletakkan imej atau video di dalam bayang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!