Changez rapidement la couleur d'une image PNG à l'aide de CSS (deux méthodes)-tutoriel CSS-php.cn

Changez rapidement la couleur d'une image PNG à l'aide de CSS (deux méthodes)

藏色散人

Libérer： 2021-10-18 17:14:42

original

5798 Les gens l'ont consulté

Dans l'article précédent "Comment créer un effet verre/flou en utilisant HTML et CSS ? 》L'article vous présente la méthode d'utilisation du HTML et du CSS pour créer des effets de verre/flou. Les amis intéressés peuvent le lire et en apprendre davantage~

Cet article vous présentera comment utiliser CSS pour changer rapidement la couleur des images PNG. , qui est aussi un développement quotidien. Une méthode relativement courante pour obtenir des effets.

Tout d'abord, vous pouvez télécharger le matériel d'image png présenté dans cet article Adresse de téléchargement : //m.sbmmt.com/xiazai/sucai/1733

Changez rapidement la couleur dune image PNG à laide de CSS (deux méthodes)

(Vous pouvez télécharger l'image originale. ici ici)

Maintenant, je vais vous présenter deux méthodes d'implémentation :

La première méthode

Cet exemple utilise un filtre en niveaux de gris pour changer une image couleur en une image en niveaux de gris.

Le code est le suivant :

<!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>

Copier après la connexion

L'effet est le suivant :

Changez rapidement la couleur dune image PNG à laide de CSS (deux méthodes)

La deuxième méthode

Cet exemple utilise beaucoup de filtres pour l'image~

Le code est le suivant :

<!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>

Copier après la connexion

L'effet est le suivant :

Changez rapidement la couleur dune image PNG à laide de CSS (deux méthodes)

Ensuite, vous devez ici comprendre un attribut de filtre important :

L'attribut de filtre définit l'effet visuel (tel que le flou et la saturation) de l'élément (généralement Changez rapidement la couleur d'une image PNG à l'aide de CSS (deux méthodes) ).

L'attribut Filtre est principalement utilisé pour définir l'effet visuel de l'image. Il existe de nombreuses valeurs d'attributdans la fonction Filtre. La syntaxe est la suivante :

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

Copier après la connexion

Les filtres utilisent généralement des pourcentages (tels que : 75 %). , bien entendu, ils peuvent également être exprimés en décimales (comme : 0,75) .

Remarque : L'attribut "filtre" non standard pris en charge par les anciennes versions d'Internet Explorer (4.0 à 8.0) est obsolète. Les navigateurs IE8 et versions antérieures utilisent généralement l'attribut opacity.

La plate-forme de site Web chinois PHP propose de nombreuses ressources pédagogiques vidéo, invitez tout le monde à apprendre le "tutoriel vidéo CSS" !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!