這篇文章將為大家詳細講解有關css設置背景圖片灰度的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創新互聯專注于企業網絡營銷推廣、網站重做改版、宣漢網站定制設計、自適應品牌網站建設、H5建站、商城網站建設、集團公司官網建設、外貿網站制作、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為宣漢等各大城市提供網站開發制作服務。

css是什么意思

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

css設置背景圖片灰度的方法：可以利用濾鏡屬性filter來進行設置，如【filter:grayscale(100%)】，表示將圖像完全轉換為灰度圖像。

css中有一個濾鏡屬性filter，該屬性定義了元素（通常是img）的可視效果，如模糊、飽和度、灰度等。

屬性語法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

常用屬性值：

• none    默認值，沒有效果。

• blur(px)    給圖像設置高斯模糊。"radius"一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果沒有設定值，則默認是0；這個參數可設置css長度值，但不接受百分比值。

• brightness(%)    給圖片應用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應線性乘數效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，默認是1。

• contrast(%)    調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設置值，默認是1。

• grayscale(%)

• 將圖像轉換為灰度圖像。值定義轉換的比例。值為100%則完全轉為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；

示例1：

圖片轉為黑白色:



注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持該屬性。

運行結果：

示例2：

圖片使用高斯模糊效果:



注意： Internet Explorer 不支持 filter 屬性。

運行結果：

（學習視頻分享：css視頻教程）

示例3：

給圖像設置一個陰影效果:



注意： Internet Explorer 不支持 filter 屬性。

運行結果：

關于“css設置背景圖片灰度的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。