Rumah > Artikel > hujung hadapan web > Tambahkan topeng pada imej menggunakan CSS
Tambahkan topeng pada imej menggunakan CSS
- WBOYke hadapan
- 2023-09-04 12:01:021492semak imbas
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;Gunakan nilai yang berbeza untuk sifat
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 5cd061ee8879d3cd5762a51ae91205b7 dan menambah alamat imej supaya kami boleh menambah topeng pada imej.
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!