Tukar warna imej PNG dengan cepat menggunakan CSS (dua kaedah)-tutorial css-php.cn

Tukar warna imej PNG dengan cepat menggunakan CSS (dua kaedah)

藏色散人

Lepaskan： 2021-10-18 17:14:42

asal

5831 orang telah melayarinya

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: //m.sbmmt.com/xiazai/sucai/1733

<.>

Tukar warna imej PNG dengan cepat menggunakan CSS (dua kaedah)

(Anda boleh memuat turun imej asal di

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>

Salin selepas log masuk

Kesannya adalah seperti berikut:

Tukar warna imej PNG dengan cepat menggunakan CSS (dua kaedah)

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>

Salin selepas log masuk

Kesannya adalah seperti berikut:

Tukar warna imej PNG dengan cepat menggunakan CSS (dua kaedah)

Maka Di sini anda perlu memahami penapis atribut penting:

Atribut penapis mentakrifkan kesan visual (seperti kabur dan tepu) elemen (biasanya Tukar warna imej PNG dengan cepat menggunakan CSS (dua kaedah)

Tukar warna imej PNG dengan cepat menggunakan CSS (dua kaedah)

) .

Atribut penapis digunakan terutamanya untuk menetapkan kesan visual imej Terdapat banyak nilai atribut dalam fungsi Penapis adalah seperti berikut:

filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()
        |hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
-------------------------------------------------------------------------------
使用空格分隔多个滤镜

Salin selepas log masuk

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 "

tutorial video css"!

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!