css怎么改变图片颜色-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

在css中，可以使用filter属性来改变图片颜色，例如：使用“filter:grayscale(%);”将图片设置为黑白、“filter: sepia(%);”将图片设置为棕褐色图像等。CSS的filter属性主要用于设置图像的视觉效果。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在CSS中可以使用filter属性，将类似Photoshop的滤镜效果应用于图片上，改变图片的颜色。

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="UTF-8">
    <style type="text/css">
        img{
            width: 300px;
        }
        .img1{
            /*元素的灰度*/
             
            /*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }
        .img2{
            /*将图像转换为棕褐色图像*/
             
            /*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
            -webkit-filter: sepia(100%);
            filter: sepia(100%);
        }
 
        .img3{
            /*色调旋转*/
             
            /*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
            -webkit-filter:hue-rotate(55deg);
            filter: hue-rotate(55deg);
        }
        .img4{
            /*反转元素*/
             
            /*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
            -webkit-filter: invert(100%); 
            filter: invert(100%); 
        }
    </style>
    </head>
    <body>
        <div class="demo">
            <img src="img/1.jpg" class="img1"/>
            <img src="img/1.jpg" class="img2"/>
            <img src="img/1.jpg" class="img3"/>
            <img src="img/1.jpg" class="img4"/>
        </div>
    </body>
</html>