溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css3怎么實現圖片的高斯模糊效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
一、什么是filter （濾鏡）
CSS3 Filter（濾鏡）屬性定義了元素(通常是<img>)的可視效果，提供了模糊和改變元素顏色的功能。CSS3 Fitler 常用于調整圖像的渲染、背景或邊框顯示效果。
瀏覽器支持：
-webkit-filter是css3的一個屬性，Webkit率先支持了這幾個功能，感覺效果很不錯。
表格中的數字表示支持該方法的第一個瀏覽器的版本號。
緊跟在數字后面的 -webkit- 為指定瀏覽器的前綴。
注意: 舊版 Internet Explorer 瀏覽器(4.0 to 8.0) 支持的非標準 "filter" 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用css opacity 屬性。
下面看看filter這個屬性，現在規范中支持的效果：
grayscale（灰度）：值為0-1之間的小數
sepia（褐色）：值為0-1之間的小數
saturate（飽和度）：值為num
hue-rotate（色相旋轉）：值為angle
invert（反色）：值為0-1之間的小數
opacity（透明度）：值為0-1之間的小數
brightness（亮度）：值為0-1之間的小數
contrast（對比度）：值為num
blur（模糊）：值為length（radius）
drop-shadow（陰影）
實現模糊效果的filter 語法：
filter: blur();
blur()給圖像設置高斯模糊。"length（radius）"一值設定高斯函數的標準差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果沒有設定值，則默認是0；這個參數可設置css長度值，但不接受百分比值。
二、圖片模糊的三種效果
原圖：
1.css普通圖片模糊效果（整張圖片全模糊）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片模糊</title>
<style>
.bg {
width: 1240px;
height: 592px;
position: relative;
background: url("2.png") no-repeat fixed;
padding: 1px;
box-sizing: border-box;
z-index: 1;
}
.bg:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(2px);
z-index: 2;
}
.drag {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
text-align: center;
z-index: 11;
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>效果圖：
2.css圖片局部模糊效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片模糊</title>
<style>
.bg {
width: 1240px;
height: 592px;
background: url("2.png") no-repeat fixed;
padding: 1px;
box-sizing: border-box;
z-index: 1;
}
.drag {
margin: 100px auto;
width: 300px;
height: 300px;
background: inherit;
position: relative;
text-align: center;
}
.drag>div {
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
z-index: 11;
}
.drag:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(30px);/*為了模糊更明顯，調高模糊度*/
z-index: 2;
}
</style>
</head>
<body>
<div class="bg">
<div class="drag">like window</div>
</div>
</body>
</html>效果圖:
3.css圖片局部清晰效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片模糊</title>
<style>
.bg {
width: 1240px;
height: 592px;
background: url("2.png") no-repeat fixed;
padding: 1px;
box-sizing: border-box;
z-index: 1;
}
.bg:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(3px);
z-index: 1;
}
.drag {
position: absolute;
left: 40%;
top: 30%;
/*transform: translate(-50%,-50%);*/
width: 200px;
height: 200px;
text-align: center;
background: inherit;
z-index: 11;
box-shadow: 0 0 10px 6px rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<div class="bg">
<div class="drag">like window</div>
</div>
</body>
</html>效果圖：
關于css3怎么實現圖片的高斯模糊效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
