css3怎么實現(xiàn)圖片濾鏡效果

這篇文章主要介紹css3怎么實現(xiàn)圖片濾鏡效果，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)專業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商，專業(yè)提供成都服務(wù)器托管，服務(wù)器租用，達(dá)州服務(wù)器托管，達(dá)州服務(wù)器托管，成都多線服務(wù)器托管等服務(wù)器托管服務(wù)。

首先，我們先建立一個demo，代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3 filter濾鏡</title>
		<style>
			.demo{
				width: 400px;
				height: 300px;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img src="1.jpg" />
		</div>
	</body>
</html>

效果是這樣的（沒有加任何濾鏡效果）：

css3怎么實現(xiàn)圖片濾鏡效果

下面我們來看看css3 filter濾鏡屬性可以實現(xiàn)的圖片濾鏡效果：

1、css3 圖片模糊濾鏡效果

只需要加人以下css代碼：

.demo img{
filter: blur(2px);/* 給圖像設(shè)置高斯模糊，值越大越模糊 */
}

效果圖：

css3怎么實現(xiàn)圖片濾鏡效果

考慮到瀏覽器的兼容性，我們可以添加一條語句：

.demo img{
-webkit-filter: blur(2px); /*考慮瀏覽器兼容性：兼容 Chrome, Safari, Opera */
filter: blur(2px);/* 給圖像設(shè)置高斯模糊 */
}

2、css3濾鏡---brightness(%)設(shè)置圖片亮度

.demo img{
-webkit-filter: brightness(50%); /*考慮瀏覽器兼容性：兼容 Chrome, Safari, Opera */
filter: brightness(50%);
/* 設(shè)置圖片的亮度，使其看起來更亮或更暗。如果值是0%，圖像會全黑；值是100%，則圖像無變化；值是100%以上，則圖像更亮*/
}

效果圖：

css3怎么實現(xiàn)圖片濾鏡效果

.demo img{
   -webkit-filter: brightness(150%);
   filter: brightness(150%);
}

效果圖：

css3怎么實現(xiàn)圖片濾鏡效果

3、css3濾鏡---contrast(%)設(shè)置圖片對比度

.demo img{
    -webkit-filter: contrast(50%); /*考慮瀏覽器兼容性：兼容 Chrome, Safari, Opera */
    filter: contrast(50%);
    /* 設(shè)置圖片對比度，值是0%的話，圖像會全黑。值是100%，圖像不變。值可以超過100%，意味著會運用更低的對比。若沒有設(shè)置值，默認(rèn)是1。*/
}

效果圖：

css3怎么實現(xiàn)圖片濾鏡效果

.demo img{
    -webkit-filter: contrast(150%); /*考慮瀏覽器兼容性：兼容 Chrome, Safari, Opera */
    filter: contrast(150%);
}

效果圖：

css3怎么實現(xiàn)圖片濾鏡效果

4、css3濾鏡---drop-shadow()設(shè)置圖片陰影

.demo img{
     -webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5)); /*考慮瀏覽器兼容性：兼容 Chrome, Safari, Opera */
     filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
     /* 給圖像設(shè)置一個陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。*/
}

效果圖：

css3怎么實現(xiàn)圖片濾鏡效果

說明：

filter:drop-shadow(h-shadow v-shadow blur spread color);

h-shadow：設(shè)置陰影的水平方向偏移量，負(fù)值會使陰影出現(xiàn)在元素左邊。

v-shadow：設(shè)置陰影的垂直方向偏移量，負(fù)值會使陰影出現(xiàn)在元素上方。

blur：設(shè)置模糊度，值越大，越模糊，則陰影會變得更大更淡；不允許負(fù)值 若未設(shè)定，默認(rèn)是0 (則陰影的邊界很銳利)。

spread：正值會使陰影擴(kuò)張和變大，負(fù)值會是陰影縮?。蝗粑丛O(shè)定，默認(rèn)是0 (陰影會與元素一樣大小)。注：Webkit, 以及一些其他瀏覽器 不支持spread，如果加了也不會渲染。

color：設(shè)置陰影顏色；若未設(shè)定，顏色值基于瀏覽器。

5、css3濾鏡---grayscale(%)設(shè)置圖片灰度

.demo img{
   -webkit-filter: grayscale(100%); /*考慮瀏覽器兼容性：兼容 Chrome, Safari, Opera */
   filter: grayscale(100%);
   /* 將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無變化。*/
}

效果圖：

css3怎么實現(xiàn)圖片濾鏡效果

6、css3濾鏡---hue-rotate(deg)設(shè)置圖片色相旋轉(zhuǎn)

.demo img{
   -webkit-filter: hue-rotate(90deg); /*考慮瀏覽器兼容性：兼容 Chrome, Safari, Opera */
   filter: hue-rotate(90deg);
   /* 給圖像應(yīng)用色相旋轉(zhuǎn)，值為0deg，則圖像無變化。若值未設(shè)置，默認(rèn)值是0deg。該值雖然沒有最大值，超過360deg的值相當(dāng)于又繞一圈*/
}

效果圖：

css3怎么實現(xiàn)圖片濾鏡效果

7、css3濾鏡---invert(%)設(shè)置圖片反色

.demo img{
   -webkit-filter: invert(100%); /*考慮瀏覽器兼容性：兼容 Chrome, Safari, Opera */
   filter: invert(100%);
   /* 反轉(zhuǎn)輸入圖像。值定義轉(zhuǎn)換的比例。100%的價值是完全反轉(zhuǎn)。值為0%則圖像無變化。值在0%和100%之間，則是效果的線性乘子。*/
}

效果圖：

css3怎么實現(xiàn)圖片濾鏡效果

8、css3濾鏡---opacity(%)設(shè)置圖片透明度

.demo img{
   -webkit-filter: opacity(50%); /*考慮瀏覽器兼容性：兼容 Chrome, Safari, Opera */
   filter: opacity(50%);
   /* 轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例。值為0%則是完全透明，值為100%則圖像無變化。 */
}

效果圖：

css3怎么實現(xiàn)圖片濾鏡效果

9、css3濾鏡---saturate(%)設(shè)置飽和度

.demo img{
   -webkit-filter: saturate(50%); /*考慮瀏覽器兼容性：兼容 Chrome, Safari, Opera */
   filter: saturate(50%);
   /* 轉(zhuǎn)換圖像飽和度。值定義轉(zhuǎn)換的比例。值為0%則是完全不飽和，值為100%則圖像無變化。超過100%的值是允許的，則有更高的飽和度。*/
}

效果圖：

css3怎么實現(xiàn)圖片濾鏡效果

10、css3濾鏡---sepia(%)設(shè)置圖片褐色（有種復(fù)古的舊照片感覺）

.demo img{
   -webkit-filter: sepia(50%); /*考慮瀏覽器兼容性：兼容 Chrome, Safari, Opera */
   filter: sepia50%);
   /* 將圖像轉(zhuǎn)換為深褐色。值定義轉(zhuǎn)換的比例。值為100%則完全是深褐色的，值為0%圖像無變化。 */
}

效果圖：

css3怎么實現(xiàn)圖片濾鏡效果

以上是css3怎么實現(xiàn)圖片濾鏡效果的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：css3怎么實現(xiàn)圖片濾鏡效果
本文鏈接：http://bm7419.com/article34/pscspe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站維護(hù)、微信公眾號、搜索引擎優(yōu)化、定制開發(fā)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)