溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css3怎么實現(xiàn)圖片的高斯模糊效果

發(fā)布時間：2020-09-14 13:58:17 來源：億速云 閱讀：220 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)css3怎么實現(xiàn)圖片的高斯模糊效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、什么是filter （濾鏡）

CSS3 Filter（濾鏡）屬性定義了元素(通常是<img>)的可視效果，提供了模糊和改變元素顏色的功能。CSS3 Fitler 常用于調(diào)整圖像的渲染、背景或邊框顯示效果。

瀏覽器支持：

-webkit-filter是css3的一個屬性，Webkit率先支持了這幾個功能，感覺效果很不錯。

css3怎么實現(xiàn)圖片的高斯模糊效果

表格中的數(shù)字表示支持該方法的第一個瀏覽器的版本號。

緊跟在數(shù)字后面的 -webkit- 為指定瀏覽器的前綴。

注意: 舊版 Internet Explorer 瀏覽器(4.0 to 8.0) 支持的非標(biāo)準(zhǔn) "filter" 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用css opacity 屬性。

下面看看filter這個屬性，現(xiàn)在規(guī)范中支持的效果：

  1. grayscale（灰度）：值為0-1之間的小數(shù)

  2. sepia（褐色）：值為0-1之間的小數(shù)

  3. saturate（飽和度）：值為num

  4. hue-rotate（色相旋轉(zhuǎn)）：值為angle

  5. invert（反色）：值為0-1之間的小數(shù)

  6. opacity（透明度）：值為0-1之間的小數(shù)

  7. brightness（亮度）：值為0-1之間的小數(shù)

  8. contrast（對比度）：值為num

  9. blur（模糊）：值為length（radius）

  10. drop-shadow（陰影）

實現(xiàn)模糊效果的filter 語法：

filter: blur();

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

二、圖片模糊的三種效果

原圖：

css3怎么實現(xiàn)圖片的高斯模糊效果

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>

效果圖：

css3怎么實現(xiàn)圖片的高斯模糊效果

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);/*為了模糊更明顯，調(diào)高模糊度*/
				z-index: 2;
			}
		</style>
	</head>

	<body>
		<div class="bg">
			<div class="drag">like window</div>
		</div>
	</body>

</html>

效果圖:

css3怎么實現(xiàn)圖片的高斯模糊效果

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怎么實現(xiàn)圖片的高斯模糊效果

關(guān)于css3怎么實現(xiàn)圖片的高斯模糊效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手