站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

        使用CSS快速更改PNG圖像的顏色(兩種方法)

        在上一篇《如何用HTML和CSS制作玻璃/模糊效果?》文章中給大家介紹了用HTML和CSS制作玻璃/模糊效果的方法,感興趣的朋友可以閱讀了解一下~

        本文將給大家介紹如何使用CSS快速更改PNG圖像的顏色,這也是日常開發(fā)中比較常見一個效果實(shí)現(xiàn)方法。

        首先大家可以先下載本文中展示的png圖片素材,下載地址:https://www.php.cn/xiazai/sucai/1733

        使用CSS快速更改PNG圖像的顏色(兩種方法)

        (可在這里下載原圖)

        下面我將給大家介紹兩種實(shí)現(xiàn)方法:

        第一種方法

        本示例使用灰度濾鏡將彩色圖像更改為灰度圖像。

        代碼如下:

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

        效果如下圖:

        使用CSS快速更改PNG圖像的顏色(兩種方法)

        第二種方法

        此示例對圖像使用了很多filter~

        代碼如下:

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

        效果如下圖:

        使用CSS快速更改PNG圖像的顏色(兩種方法)

        那么這里需要大家了解一個重要的屬性filter :

        filter屬性定義了元素(通常是<img>)的可視效果(例如:模糊與飽和度)。

        Filter屬性主要用于設(shè)置圖像的視覺效果,F(xiàn)ilter 功能存在許多屬性值,語法如下:

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

        濾鏡通常使用百分比 (如:75%), 當(dāng)然也可以使用小數(shù)來表示 (如:0.75)。

        注:舊版 Internet Explorer 瀏覽器(4.0 to 8.0) 支持的非標(biāo)準(zhǔn) "filter" 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用 opacity 屬性。

        PHP中文網(wǎng)平臺有非常多的視頻教學(xué)資源,歡迎大家學(xué)習(xí)《css視頻教程》!

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 久久亚洲精品成人av无码网站| 欧美+亚洲+精品+三区| 久久久久人妻精品一区二区三区| 麻豆精品久久精品色综合| 无码人妻精品一区二区在线视频| 精品多毛少妇人妻AV免费久久| 久草视频在线这里精品| 久久亚洲美女精品国产精品| 精品久久久久久无码人妻蜜桃 | 亚洲国产成人精品女人久久久 | 最新在线精品国自av| 成人精品一区二区久久久| 国产精品久久永久免费| 国产成人精品午夜福利| 久久亚洲私人国产精品| 伊人久久精品无码二区麻豆| 久久亚洲国产精品123区| 国产精品主播一区二区| 亚洲精品欧美综合| 四虎国产精品免费观看| 国产精品久久久久影院嫩草| 精品不卡一区二区| 久久精品国产亚洲AV无码娇色| 亚洲精品无码成人片久久| 蜜臀AV无码国产精品色午夜麻豆| 国产亚洲午夜高清国产拍精品| 亚洲愉拍自拍欧美精品| 国产成人精品久久亚洲高清不卡| 2021国产三级精品三级在专区| 久久精品一区二区| 欧美久久精品一级c片片| 久久精品国产精品青草| 久久er国产精品免费观看2| 国产精品一二区| 久久国产成人精品麻豆| 久久精品视频免费| 99久久精品国产毛片| 国产精品 猎奇 另类视频| 国产精品v欧美精品v日韩| 国产成人精品免高潮在线观看| 国产精品免费久久久久电影网|