Tambahkan topeng pada imej menggunakan CSS
Kita boleh meletakkan lapisan pada elemen untuk menyembunyikannya sebahagian atau sepenuhnya. Atribut mask-image ialah atribut CSS yang digunakan untuk menentukan lapisan pada elemen Ia juga boleh menjadi imej, tetapi kita perlu menggunakan alamat imej untuk menambah topeng pada imej.
Dalam artikel ini, kita akan melihat cara menambah topeng pada imej menggunakan sifat CSS dan apa lagi yang boleh kita lakukan dengan sifat yang sama.
Tambah topeng pada imej
atribut imej topeng ialah atribut yang akan kami gunakan untuk menambah topeng pada imej atau teks yang dikehendaki. Sifat ini menambah lapisan yang boleh menyembunyikan sebahagian atau sepenuhnya imej. Untuk lebih memahami sifat ini, mari kita lihat dengan pantas sintaks harta benda tersebut.
Tatabahasa
mask-image: none, <image>, initial, inherit;
mask-image, nilai none tidak akan menambah lapisan topeng tetapi akan menetapkan lapisan hitam lutsinar di atas imej atau teks.
Untuk lebih memahami sifat ini, kami akan melalui contoh untuk mengetahui lebih lanjut tentang cara nilai sifat imej topeng berfungsi.
Contoh
Dalam contoh ini, kami akan menggunakan nilai
Di sini, mencipta kelas kontena dan kemudian berpindah ke bahagian CSS, dalam bahagian ini kita mula-mula menukar ketinggian dan lebar dan kemudian menggunakan atribut topeng bersama-sama dengan imej yang ingin kita cetak. Mari kita lihat output yang kita dapat daripada kod tersebut.
<!DOCTYPE html>
<html lang="en">
<head>
<title>An example of using the make-source property</title>
<style>
.contain {
width: 330px;
height: 330px;
background-image: url(
"https://www.tutorialspoint.com/static/images/simply-easy-learning.jpg"
);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: center;
-webkit-mask-box-image: url(https://www.tutorialspoint.com/images/logo.png);
}
body {
background-color: white;
}
</style>
</head>
<body>
<div class="contain"></div>
</body>
</html>
Ini adalah output yang akan kami perolehi, kerana anda dapat melihat imej itu kini bertopeng selepas menggunakan atribut imej topeng.
Sekarang kita akan menggunakan nilai hartanah baharu dalam contoh lain, jadi mari kita beralih kepada contoh seterusnya.
Contoh
Dalam contoh ini, kita akan menggunakan atribut imej topeng dan menetapkan nilainya kepada kecerunan linear Sekarang, mari kita beralih ke kod dan fahami cara atribut ini berfungsi.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of using mask-image property</title>
<style>
.container {
height: 130px;
width: 130px;
background-image: url(
"https://www.tutorialspoint.com/coffeescript/images/coffeescript-mini-logo.jpg");
background-position: center;
background-size: cover;
-webkit-mask-image: linear-gradient(
to top, transparent 19%, black 81%);
background-repeat: no-repeat;
mask-image: linear-gradient(
to top, transparent 19%, black 21%
);
}
body {
background-color: white;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
Dalam kod di atas, kami mula-mula mencipta bekas dan kemudian menukar ketinggian dan lebarnya dalam bahagian CSS. Selepas itu, kami menambah imej yang kami mahu gunakan topeng dan tetapkan nilainya kepada kecerunan linear menggunakan sifat imej topeng. Kami menetapkan warna hitam kepada 81% dan telus kepada 20%. Mari kita lihat kod di atas.
Dalam contoh di atas, anda dapat melihat bahawa imej adalah lutsinar dari bawah, yang bermaksud topeng telah digunakan pada imej.
NOTA - Jika kita menetapkan nilai hitam dalam kecerunan linear kepada 100%, imej yang kita ada akan dapat dilihat sepenuhnya kepada pengguna, jika kita menetapkan ketelusan kepada 100%, imej itu akan disembunyikan sepenuhnya oleh topeng.
Contoh
Dalam contoh di bawah, kami menukar nilai sifat kepada kecerunan jejarian, yang bermaksud topeng kini akan ditambah dalam bentuk bulat, komponen kod yang lain adalah serupa. Mari kita lihat output yang kita akan dapat menggunakan kod di bawah.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Another example for the image-mask property</title>
<style>
.mask2 {
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
-webkit-mask-image: radial-gradient(circle, black 49%, rgba(0, 0, 0, 0.5) 50%);
}
</style>
</head>
<body>
<h1>This is an example of the mask-image property</h1>
<h3>We are using the gradient value</h3>
<div class="mask2">
<img src="https://www.tutorialspoint.com/images/logo.png" width="600" height="400">
</div>
</body>
</html>
Semasa melaksanakan prosedur di atas, anda boleh melihat topeng kelihatan dalam bentuk bulat kerana beberapa bahagian imej adalah lutsinar dan bahagian lain gelap.
Mengapa kami menggunakan awalan -webkit?
Kami menggunakan awalan -webkit kerana kebanyakan penyemak imbas hanya mempunyai sokongan separa untuk fungsi penyamaran yang kami gunakan hari ini. Kami menggunakan kedua-dua awalan -webkit dan atribut standard untuk keserasian dengan semua penyemak imbas.
Kesimpulan
Topeng dalam CSS boleh menyembunyikan sebahagian atau sepenuhnya sifat, bergantung pada nilai yang digunakan dengan harta itu. Topeng boleh digunakan seperti klip topeng, imej topeng, mod topeng, asal topeng, dsb. Sifat masking boleh menetapkan topeng pada imej atau teks, dan kami juga boleh menukar bentuk topeng yang kami ingin gunakan. Topeng digunakan pada imej untuk menjadikan pengguna lebih mengasyikkan atau menyembunyikan bahagian tertentu pada imej.
Atas ialah kandungan terperinci Tambahkan topeng pada imej menggunakan CSS. 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
AI Hentai Generator
Menjana ai hentai secara percuma.
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
1359
52
Menambah bayang -bayang kotak ke blok dan elemen WordPress
Mar 09, 2025 pm 12:53 PM
CSS box-shadow dan garis besar sifat mendapat tema.json Sokongan dalam WordPress 6.1. Let ' s melihat beberapa contoh bagaimana ia berfungsi dalam tema sebenar, dan pilihan apa yang kita perlu gunakan gaya ini ke blok dan elemen WordPress.
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
CSS Scrollbars Custom Custom: Pameran
Mar 10, 2025 am 11:37 AM
Dalam artikel ini kita akan menyelam ke dunia scrollbars. Saya tahu, ia tidak terdengar terlalu glamor, tetapi percayalah, halaman yang direka dengan baik
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
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
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
Mari kita gunakan (x, x, x, x) untuk bercakap mengenai kekhususan
Mar 24, 2025 am 10:37 AM
Saya hanya berbual dengan Eric Meyer pada hari yang lain dan saya teringat cerita Eric Meyer dari tahun -tahun pembentukan saya. Saya menulis catatan blog mengenai kekhususan CSS, dan
