Bagaimana untuk meletakkan imej atau video di dalam bayang?
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="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/banner-img.png?v=2.001" class="lazy" / alt="Bagaimana untuk meletakkan imej atau video di dalam bayang?" >
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/images/logo.png" class="lazy" / 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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress
Apr 02, 2025 am 04:27 AM
Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?
Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'?
Apr 05, 2025 pm 05:51 PM
Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...
