css3如何實現圖片的高斯模糊效果？ CSS3 Filter（濾鏡）實作（程式碼實例）
本章介紹用css3如何實現圖片的高斯模糊效果，CSS3 Filter（濾鏡）實現對圖片元素模糊處理；讓大家了解如何設定圖片元素的模糊效果，透過實例介紹filter實現圖片高斯模糊的三種效果。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一、什麼是filter （濾鏡）
#CSS3 Filter（濾鏡）屬性定義了元素(通常是
)的可視效果，提供了模糊和改變元素顏色的功能。 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();
二、圖片模糊的三種效果
原圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片模糊</title>
<style>
.bg {
width: 1240px;
height: 592px;
position: relative;
background: url("css3如何實現圖片的高斯模糊效果？ CSS3 Filter（濾鏡）實作（程式碼實例）") 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><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片模糊</title>
<style>
.bg {
width: 1240px;
height: 592px;
background: url("css3如何實現圖片的高斯模糊效果？ CSS3 Filter（濾鏡）實作（程式碼實例）") 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><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片模糊</title>
<style>
.bg {
width: 1240px;
height: 592px;
background: url("css3如何實現圖片的高斯模糊效果？ CSS3 Filter（濾鏡）實作（程式碼實例）") 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如何實現圖片的高斯模糊效果？ CSS3 Filter（濾鏡）實作（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
純CSS3怎麼實現波浪效果？ （程式碼範例）
Jun 28, 2022 pm 01:39 PM
純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！
C++影像處理實務指南：實現影像特效與濾鏡
Nov 27, 2023 am 11:40 AM
在電腦科學和影像處理領域，C++一直是最常用的程式語言之一。影像處理是電腦視覺的重要子領域之一，包括影像分析、處理和識別等方面。本文將介紹C++影像處理中的一些基本概念和技巧，並提供一些實現影像特效和濾鏡的範例程式碼，幫助讀者更好地理解和實踐C++影像處理。一、C++影像處理基礎1.1常用的影像檔案格式在影像處理中，我們通常需要用到各種影像檔案格式，包括
css怎麼隱藏元素但不佔空間
Jun 01, 2022 pm 07:15 PM
兩種方法：1、利用display屬性，只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素，只需為元素加上「position:absolute;top:-9999px;」樣式。
css3怎麼實現花邊邊框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框，即給邊框加上背景圖片，只需要將背景圖片指定為花邊樣式即可；語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。
原來利用純CSS也能實現文字輪播與圖片輪播！
Jun 10, 2022 pm 01:00 PM
怎麼製作文字輪播與圖片輪播？大家第一想到的是利用js，其實利用純CSS也能實現文字輪播與圖片輪播，下面來看看實作方法，希望對大家有幫助！
css3如何實現滑鼠點擊圖片放大
Apr 25, 2022 pm 04:52 PM
實作方法：1、使用「:active」選擇器選取滑鼠點擊圖片的狀態；2、使用transform屬性和scale()函數實現圖片放大效果，語法「img:active {transform: scale(x軸放大倍率,y軸放大倍率);}」。
另闢蹊徑！看看使用CSS濾鏡怎麼建構圓角和波浪效果
Oct 18, 2022 pm 08:21 PM
這篇文章帶大家另闢蹊徑，聊聊使用CSS濾鏡建構圓角的方法，並利用圓角聊聊實現波浪效果的方法，希望對大家有幫助！
