Rumah >hujung hadapan web >tutorial css >Tukar warna imej PNG dengan cepat menggunakan CSS (dua kaedah)
Tukar warna imej PNG dengan cepat menggunakan CSS (dua kaedah)
- 藏色散人asal
- 2021-08-31 11:12:565949semak imbas
Dalam artikel sebelumnya "Bagaimana untuk mencipta kesan kaca/kabur menggunakan HTML dan CSS? 》Artikel ini memperkenalkan anda kepada kaedah menggunakan HTML dan CSS untuk mencipta kesan kaca/kabur rakan-rakan yang berminat boleh membaca dan mempelajarinya~
Artikel ini akan memperkenalkan kepada anda cara menggunakan CSS dengan cepat. menukar imej PNG Warna, ini juga merupakan kaedah pelaksanaan kesan biasa dalam pembangunan harian.
Pertama sekali, anda boleh memuat turun bahan gambar png yang ditunjukkan dalam artikel ini Alamat muat turun: https://www.php.cn/xiazai/sucai/1733
<.>
di sini)
Saya akan memperkenalkan anda kepada dua kaedah pelaksanaan di bawah:Kaedah Pertama
Contoh ini menggunakan penapis skala kelabu untuk menukar imej warna kepada imej skala kelabu. Kod adalah seperti berikut:<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<h2>灰度图像</h2>
<img src=
"001.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html>Kesannya adalah seperti berikut:
Kaedah kedua
Contoh ini menggunakan banyak penapis untuk imej~Kodnya adalah seperti berikut:<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
width:40%;
float:left;
}
.image1 {
filter: invert(100%);
}
.image2 {
filter: sepia(100%);
}
</style>
</head>
<body>
<img class = "image1" src=
"001.png"
width="500px" height="250px" alt="filter applied" />
<img class = "image2" src=
"001.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html>Kesannya adalah seperti berikut: 
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()
|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
-------------------------------------------------------------------------------
使用空格分隔多个滤镜Penapis biasanya menggunakan peratusan (seperti: 75%), dan sudah tentu Perpuluhan boleh digunakan untuk menyatakan (cth: 0.75). Nota: Atribut "penapis" bukan standard yang disokong oleh versi lama Internet Explorer (4.0 hingga 8.0) telah ditamatkan. IE8 dan penyemak imbas yang lebih rendah biasanya menggunakan atribut kelegapan. Platform tapak web PHP Cina mempunyai banyak sumber pengajaran video Selamat datang semua orang untuk mempelajari "Atas ialah kandungan terperinci Tukar warna imej PNG dengan cepat menggunakan CSS (dua kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!