filter 濾鏡
動圖為效果添加前后對比。
經(jīng)常用ps的應(yīng)該知道這些的屬性的含義，可以自己試一試看看不同參數(shù)都有什么樣的效果。
blur() 模糊度
作用是調(diào)整模糊度，單位像素。
filter: blur(10px);
例子 漸變光暈
其實是兩個相同的div疊加，其中一個加上了模糊度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
body{
display: flex;
height:100vh;
justify-content: center;
align-items: center;
background: #000;
}
.box{
width:300px;
height: 400px;
background: linear-gradient(30deg,#3498db,#9b59b6);
border-radius: 5px;
position: relative;
}
.box::before{
content:"";
width:120%;
height: 120%;
position: absolute;
background: red;
z-index: -1;
top:-10%;
left:-10%;
background: linear-gradient(30deg,#3498db,#9b59b6);
filter:blur(70px);
}
</style>
</head>
<body>
<class class="box">
</class>
</body>
</html>
brightness() 元素亮度
作用是調(diào)整元素的亮度，單位百分?jǐn)?shù)或小數(shù)，小于1暗，大于亮。
filter: brightness(0.5);
contrast() 對比度
作用是調(diào)整元素的對比度，單位是百分?jǐn)?shù)。
大于1提高對比度，小于1降低對比度。
這里加個圖片吧，更好的展示此效果。
filter: contrast(2);
grayscale() 元素灰度
作用是調(diào)整元素的灰度，單位是百分?jǐn)?shù)。
最大是百分之百。
網(wǎng)站需要在特殊節(jié)日變成灰色就可以給body加上這個屬性。 讓整個網(wǎng)站變成灰色調(diào)。
filter: grayscale(1);
hue-rorate() 色相
調(diào)整元素的色相，單位是角度。
filter: hue-rotate(80deg);
opacity() 透明度
調(diào)整元素的透明度，單位是百分?jǐn)?shù)。
filter: opacity(0.5);
invert() 反轉(zhuǎn)顏色
invert() 調(diào)整元素的反轉(zhuǎn)輸入顏色，單位是百分?jǐn)?shù)。
filter: invert(1);
saturate() 飽和度
改變圖像飽和度。值為 0% 則是完全不飽和，值為 100% 則圖像無變化。超過 100% 則增加飽和度。
filter: saturate(2);
backdrop-filter 蒙版，濾鏡
與filter用法相同，只不過其是對其后面元素起作用的。
可以理解為filter作用于物體，而backdrop-filter相當(dāng)于一個幕布，遮住的才會變化。還是不理解沒關(guān)系，看下面的例子就明白了。文章來源：http://www.zghlxwxcb.cn/news/detail-658434.html
例子 卷軸展開
文章來源地址http://www.zghlxwxcb.cn/news/detail-658434.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
body{
display: flex;
height:100vh;
justify-content: center;
align-items: center;
}
.box{
display: flex;
width:60%;
object-fit: cover;
object-position: center top;
position: relative;
}
.box img{
height:600px;
width:100%;
object-fit: cover;
}
.box::before{
content:"";
width:100%;
height: 100%;
background: rgb(255, 255, 255, 0.4);
position: absolute;
right:0;
backdrop-filter: blur(10px);
border-left: 5px solid #000;
transition: 5s ease;
}
.box:hover::before{
width: 0;
border-left: 10px solid #000;
}
</style>
</head>
<body>
<div class="box">
<img src="1.jpg" alt="">
</div>
</body>
</html>
到了這里，關(guān)于CSS：filter濾鏡 詳解（用法 + 代碼 + 例子 + 效果）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
