css3可以給圖片去掉顏色;可利用filter配合grayscale屬性給圖片去掉顏色,filter屬性用於定義元素的可視效果,grayscale屬性可以將圖像轉換為灰度圖像,語法為“圖片元素{filter:grayscale(100%}」。
#本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。
css3能給圖片去掉顏色
filter 屬性定義了元素(通常是)的可視效果(例如:模糊與飽和度) 。
語法為:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
其中:
grayscale(%)
可以將影像轉換為灰階影像。值定義轉換的比例。
值為100%則完全轉為灰階影像,數值為0%影像無變化。數值在0%到100%之間,則為效果的線性乘子。若未設定,數值預設為0;
範例如下:
<html> <head> <style> img { filter: grayscale(100%); } </style> </head> <body> <p>将图像去色:</p> <img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%"> </body> </html>
輸出結果:
(學習影片分享:css影片教學)
以上是css3能給圖片去掉顏色嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!