溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css設置背景圖片灰度的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言，主要是用來設計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結構決定，從而實現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進行格式化。
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"一值設定高斯函數(shù)的標準差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果沒有設定值，則默認是0；這個參數(shù)可設置css長度值，但不接受百分比值。
brightness(%) 給圖片應用一種線性乘法，使其看起來更亮或更暗。如果值是0%，圖像會全黑。值是100%，則圖像無變化。其他的值對應線性乘數(shù)效果。值超過100%也是可以的，圖像會比原來更亮。如果沒有設定值，默認是1。
contrast(%) 調整圖像的對比度。值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設置值，默認是1。
grayscale(%)
將圖像轉換為灰度圖像。值定義轉換的比例。值為100%則完全轉為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設置，值默認是0；
示例1：
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
</style>
</head>
<body>
<p>圖片轉為黑白色:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持該屬性。</p>
</body>
</html>運行結果：
示例2：
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
</style>
</head>
<body>
<p>圖片使用高斯模糊效果:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>
</body>
</html>運行結果：
（學習視頻分享：css視頻教程）
示例3：
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>
<p>給圖像設置一個陰影效果:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p><strong>注意：</strong> Internet Explorer 不支持 filter 屬性。</p>
</body>
</html>運行結果：
關于“css設置背景圖片灰度的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
