国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

CSS3十大濾鏡效果詳解

2年前作者：小明的Fire計劃分類：Toy博客閱讀(24)違法舉報

這篇具有很好參考價值的文章主要介紹了CSS3十大濾鏡效果詳解。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

濾鏡效果

類似于美顏相機、美圖秀秀這樣的美顏工具，能夠讓我們輕松地應用多種特效，例如轉換為黑白照片、復古風格化、調整亮度等。在之前僅憑CSS幾乎很難做到這些效果。
但在CSS3的語法中，所有的這些視覺特效都是通過“filter”屬性來快速實現(xiàn)的。
語法：

filter:none|方法;

filter屬性值有以下10種，每一種都對應著一種濾鏡效果。其中屬性取值無效，那么會默認取值為none。除了特殊說明，屬性取值如果是百分比值（如78%），那么該函數(shù)也接收小數(shù)（0.78）。

屬性值	說明
none	表示不設置濾鏡效果
brightness()	亮度
grayscale()	灰色
sepia()	復古
invert()	反色
hue-rotate()	旋轉（色相）
drop-shadow()	陰影
opacity()	透明度
blur()	模糊度
contrast()	對比度
saturate()	飽和度

亮度：brightness()

概念：brightness()方法用來實現(xiàn)減弱或增強圖片的亮度。

語法：

filter:brightness(amount);

屬性值

取值為0%時就是完全黑色，值為100%就表示圖像無變化。如果值在0%到100%之間表示減弱圖片的亮度，值大于100%以上就表示增強圖片的亮度。

實例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>明亮</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			div{
				display:inline-block;
				width:230px;
				height:230px;
				margin:20px 20px;
			}
			.after{
				filter:brightness(2);
			}
		</style>
	</head>
	<body>
		<div class="before">
			<h2>之前</h2>
			<img src="../img/9.png" alt="">
		</div>
		<div class="after">
			<h2>現(xiàn)在</h2>
			<img src="../img/9.png" alt="">
		</div>
		
	</body>
</html>

運行結果
CSS3十大濾鏡效果詳解,html+css,css3,前端,css,筆記

灰度：grayscale()

概念：grayscale()方法可以用于將圖片轉換為灰度圖像（黑白圖像）。灰度濾鏡就是將彩色圖片轉換成黑白圖片。

語法：

filter:grayscale(amount);

屬性值

值為0%時表示圖形無變化。當值為100%時則表示將圖像完全轉換為灰度圖像（黑白圖像）。值為0%到100%之間的值會增加圖片灰度程度。

實例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>灰度</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					width:230px;
					height:230px;
					margin:20px 20px;
				}
				.after{
					filter:grayscale(100%);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/2.png" alt="">
			</div>
			<div class="after">
				<h2>現(xiàn)在</h2>
				<img src="../img/2.png" alt="">
			</div>
			
		</body>
	</html>

運行結果
CSS3十大濾鏡效果詳解,html+css,css3,前端,css,筆記

復古：sepia()

概念：sepia()方法用于實現(xiàn)將圖像轉換為深褐色。復古濾鏡，也叫褐色濾鏡。

語法：

filter:sepia(amount);

屬性值

取值范圍為0%~100%。其中，值為100%表示圖像完全是深褐色的，值為0%時表示圖像無變化。
如果值在0%到100%之間，值越大，變化就越增強。

實例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>復古</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after{
					filter:sepia(100%);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>現(xiàn)在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

運行結果
CSS3十大濾鏡效果詳解,html+css,css3,前端,css,筆記

反色：invert()

概念：invert()方法是用來實現(xiàn)反色濾鏡效果的。反色，指的是紅、綠、藍3個通道的像素取各自的相反值。

語法:

filter:invert(amount);

屬性值

取值范圍是0%到100%。其中，值為0%表示圖像無變化，但值為100%則表示圖像完全反轉所有顏色。如果值在0%到100%之間，值越大，反轉程序就越高。

實例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>反色</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:invert(1);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>現(xiàn)在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

運行結果
CSS3十大濾鏡效果詳解,html+css,css3,前端,css,筆記

旋轉：hue-rotate()

概念：hue-rotate()方法用來實現(xiàn)將應用色相旋轉的濾鏡效果。

語法：

filter:hue-rotate(angle);

屬性值

angle值設定圖像會被調整的色環(huán)角度值。angle值是一個度數(shù),單位是deg(即“degree”)。其中，值為0deg表示不旋轉，但值為360deg表示旋轉360^o，也就是相當于一個循環(huán)

實例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋轉</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:hue-rotate(240deg);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>現(xiàn)在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

運行結果
CSS3十大濾鏡效果詳解,html+css,css3,前端,css,筆記

陰影：drop-shadow()

概念：drop-shadow()方法用來給圖像添加陰影效果。

語法：

filter:drop-shadow(x-offset y-offset blur color);

屬性值

屬性值	說明
x-offset	必選值，定義水平陰影的偏移距離，可以使用負值。由于是W3C坐標系，因此x-offset值為正時，向右偏移；取值為負時，向左偏移。
y-offset	必選值，定義垂直陰影的偏移距離，可以使用負值。由于是W3C坐標系，因此y-offset值為正時，向下偏移；取值為負時，向上偏移。
blur	可選值，定義陰影的模糊半徑，只能為正值。值越大，陰影就越大，也越模糊。
color	可選值，定義陰影的顏色。

實例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>陰影</title>
		<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:drop-shadow(10px 10px 15px blue);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>現(xiàn)在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

運行結果
CSS3十大濾鏡效果詳解,html+css,css3,前端,css,筆記

透明度：opacity()

概念：opacity()方法用來給圖像添加透明效果，也就是透明度濾鏡效果。

語法：

filter:opacity(amount);

屬性值

取值范圍是0%~100%。其中，值為0%則是使圖像完全透明，值為100%則是圖像無變化。

實例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>透明</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:opacity(60%);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>現(xiàn)在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

運行結果

CSS3十大濾鏡效果詳解,html+css,css3,前端,css,筆記

模糊度：blur()

概念：blur()方法用來實現(xiàn)模糊度濾鏡效果，將高斯模糊應用于輸出圖片，也就是馬賽克。

語法：

filter:blur(amount);

屬性值

amount的取值是一個像素值，單位是px，定義了高斯函數(shù)的標準偏差值，即屏幕上有多少像素相互融合；因此像素值越大，模糊效果會更加明顯。值為0會使輸入保持不變。該值為空則為0.

實例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模糊度</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:blur(10px);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>現(xiàn)在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

運行結果
CSS3十大濾鏡效果詳解,html+css,css3,前端,css,筆記

對比度：contrast()

概念:contrast()方法用來調整輸入圖像的對比度。

語法:

filter:contrast(amount);

屬性值

低于100%的值會降低對比度，高于100%的值會增加對比度。值為0%將創(chuàng)建完全灰色的圖像，值為100%時不會有任何變化，值為200%時表示增強對比度為原先的2倍。該值為空時默認為1。

實例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>對比度</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					/* filter:contrast(200%); */
					filter:contrast(3);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>現(xiàn)在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

運行結果
CSS3十大濾鏡效果詳解,html+css,css3,前端,css,筆記

飽和度：saturate()

概念：saturate()方法用于改變圖像飽和度。

語法：

filter:saturate(amount);

屬性值

低于100%的值會降低飽和度，高于100%的值會增加飽和度。值為0%則是完全不飽和，值為100%則表示圖像無變化。

實例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>飽和度</title>
		<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
			
					/* filter:saturate(50%); */
					filter:saturate(300%);
					
					
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>現(xiàn)在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

運行結果
CSS3十大濾鏡效果詳解,html+css,css3,前端,css,筆記

多種濾鏡

概念：如果想要為元素同時定義多種濾鏡效果，兩個值之間要用空格隔開。濾鏡效果將按聲明順序依次應用。

語法

filter:brightness() grayscale() blur().....;

注意：濾鏡屬性值沒有規(guī)定要按一定的順序去排序，可以亂序排列。

實例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多種濾鏡效果</title>
		<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
                    filter:opacity(0.5) blur(1px) sepia(0.3) drop-shadow(20px 10px 10px rgba(31,151,247,0.5));
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>現(xiàn)在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

運行結果
CSS3十大濾鏡效果詳解,html+css,css3,前端,css,筆記文章來源地址http://www.zghlxwxcb.cn/news/detail-795354.html

到了這里，關于CSS3十大濾鏡效果詳解的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉載，請注明出處：如若內容造成侵權/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經查實，立即刪除！

分享到：

領支付寶紅包贊助服務器費用

css3的filter圖片濾鏡使用
默認：第一個圖標為選中狀態(tài)，其他三個圖標事未選中狀態(tài) 樣式：選中狀態(tài)是深藍，未選中狀體是淺藍交互：鼠標放上去選中，其他未選中，鼠標離開時候保持當前選中狀態(tài) 實現(xiàn)：目前只有一下四個圖標，需要用css3的濾鏡實現(xiàn) ?深度解讀css中filter濾鏡及在圖片與邊框改色方
2024年02月15日
瀏覽(24)
【前端基礎篇】HTML5 + CSS3 入門知識
萬維網(wǎng)的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改（這是一項推薦標準、外語原文：W3C Recommendation） HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標準制定。 HTML5的設計目的是為了在移動設備上支持多媒體。 HTML5 簡
2024年02月09日
瀏覽(24)
前端 | （十一）CSS3簡介及基本語法（上） | 尚硅谷前端html+css零基礎教程2023最新
學習來源：尚硅谷前端html+css零基礎教程，2023最新前端開發(fā)html5+css3視頻系列筆記：【HTML4】（一）前端簡介【HTML4】（二）各種各樣的常用標簽【HTML4】（三）表單及HTML4收尾【CSS2】（四）CSS基礎及CSS選擇器【CSS2】（五）CSS三大特性及常用屬性【CSS2】（六）CSS盒子模型
2024年02月16日
瀏覽(58)
css3濾鏡屬性filter讓網(wǎng)頁變黑白
今天是特殊的日子，抗擊疫情全國哀悼日，向英雄們致敬，一路走好！應該發(fā)現(xiàn)了今天很多網(wǎng)站頁面都是黑白色的，我的博客今天都是黑白色，用css3濾鏡屬性filter讓網(wǎng)頁馬上變黑白，一行代碼就搞定。在你的css里加上以下代碼即可，網(wǎng)頁馬上變黑白：
2024年02月11日
瀏覽(20)
前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎教程2023最新
學習來源：尚硅谷前端html+css零基礎教程，2023最新前端開發(fā)html5+css3視頻系列筆記：【HTML4】（一）前端簡介【HTML4】（二）各種各樣的常用標簽【HTML4】（三）表單及HTML4收尾【CSS2】（四）CSS基礎及CSS選擇器【CSS2】（五）CSS三大特性及常用屬性【CSS2】（六）CSS盒子模型
2024年02月16日
瀏覽(29)
CSS3技巧36：backdrop-filter 背景濾鏡
CSS3 有 filter 濾鏡屬性，能給內容，尤其是圖片，添加各種濾鏡效果。 filter 濾鏡詳見博文：CSS3中強大的filter(濾鏡)屬性_css3濾鏡_stones4zd的博客-CSDN博客后續(xù)，CSS3 又新增了 backdrop-filter 背景濾鏡。 backdrop-filter 的屬性值跟 filter 完全一樣，只是應用效果的標簽不同。 filter：作用
2024年02月09日
瀏覽(33)
前端 | （十二）CSS3簡介及基本語法（中）| 變換、過渡與動畫 | 尚硅谷前端html+css零基礎教程2023最新
學習來源：尚硅谷前端html+css零基礎教程，2023最新前端開發(fā)html5+css3視頻系列筆記：【HTML4】（一）前端簡介【HTML4】（二）各種各樣的常用標簽【HTML4】（三）表單及HTML4收尾【CSS2】（四）CSS基礎及CSS選擇器【CSS2】（五）CSS三大特性及常用屬性【CSS2】（六）CSS盒子模型
2024年02月16日
瀏覽(28)
[HTML]Web前端開發(fā)技術7（HTML5、CSS3、JavaScript ）CSS的定位機制——喵喵畫網(wǎng)頁
希望你開心，希望你健康，希望你幸福，希望你點贊！最后的最后，關注喵，關注喵，關注喵，佬佬會看到更多有趣的博客哦?。。?喵喵喵，你對我真的很重要！目錄前言 CSS的定位機制文檔流定位元素類型?? 浮動定位 float的用處 float的特點 clear屬性層定位 position屬性
2024年02月05日
瀏覽(40)
[HTML]Web前端開發(fā)技術9（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁
希望你開心，希望你健康，希望你幸福，希望你點贊！最后的最后，關注喵，關注喵，關注喵，佬佬會看到更多有趣的博客哦?。。?喵喵喵，你對我真的很重要！目錄前言 CSS顏色與背景顏色color屬性背景background屬性 1. 背景顏色background-color 2. 背景圖像background-image 3. 背景
2024年02月03日
瀏覽(39)
[HTML]Web前端開發(fā)技術12（HTML5、CSS3、JavaScript ）——喵喵畫網(wǎng)頁
希望你開心，希望你健康，希望你幸福，希望你點贊！最后的最后，關注喵，關注喵，關注喵，佬佬會看到更多有趣的博客哦?。?！喵喵喵，你對我真的很重要！目錄前言網(wǎng)頁標題：三列自適應寬度網(wǎng)頁標題：多行三列自適應寬度一級水平導航菜單：采用“無序列表+超
2024年01月16日
瀏覽(68)