文章目錄
- filter 濾鏡
- blur() 模糊度
- 例子 漸變光暈
- brightness() 元素亮度
- contrast() 對比度
- grayscale() 元素灰度
- hue-rorate() 色相
- opacity() 透明度
- invert() 反轉顏色
- saturate() 飽和度
- backdrop-filter 蒙版，濾鏡
- 例子 卷軸展開
filter 濾鏡
動圖為效果添加前后對比。
經常用ps的應該知道這些的屬性的含義，可以自己試一試看看不同參數都有什么樣的效果。
blur() 模糊度
作用是調整模糊度，單位像素。
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() 元素亮度
作用是調整元素的亮度，單位百分數或小數，小于1暗，大于亮。
filter: brightness(0.5);
contrast() 對比度
作用是調整元素的對比度，單位是百分數。
大于1提高對比度，小于1降低對比度。
這里加個圖片吧，更好的展示此效果。
filter: contrast(2);
grayscale() 元素灰度
作用是調整元素的灰度，單位是百分數。
最大是百分之百。
網站需要在特殊節日變成灰色就可以給body加上這個屬性。 讓整個網站變成灰色調。
filter: grayscale(1);
hue-rorate() 色相
調整元素的色相，單位是角度。
filter: hue-rotate(80deg);
opacity() 透明度
調整元素的透明度，單位是百分數。
filter: opacity(0.5);
invert() 反轉顏色
invert() 調整元素的反轉輸入顏色，單位是百分數。
filter: invert(1);
saturate() 飽和度
改變圖像飽和度。值為 0% 則是完全不飽和，值為 100% 則圖像無變化。超過 100% 則增加飽和度。
filter: saturate(2);
backdrop-filter 蒙版，濾鏡
與filter用法相同，只不過其是對其后面元素起作用的。
可以理解為filter作用于物體，而backdrop-filter相當于一個幕布，遮住的才會變化。還是不理解沒關系，看下面的例子就明白了。
例子 卷軸展開
<!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>
