CSS filter屬性
阿新 • • 發佈：2021-09-06
filter屬性
filter屬性主要用於元素的模糊,飽和度,色差效果
filter:blur();
filter:blur()主要用於元素模糊,預設值為0,無變化,數值越大,模糊度越高，單位是px
<style> img { filter: blur(5px); } </style> <body> <img src="https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt=""> </body>
filter:brightness();
filter:brightness()主要用於元素從黑暗到明亮的顯示,取值為0%時元素全黑,取值為100%元素恢復原樣
<style> img { filter: brightness(0%); } </style> <body> <img src="https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt=""> </body>
演示從0%到100%的效果
filter:contrast();
filter:contrast()主要用於調整影象的對比度,取值為0%時元素呈全灰色,取值為100%時為元素本身狀態,取值超過100%會運用更低的對比度
<style> img { filter: contrast(0%); } </style> <body> <img src="https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt=""> </body>
演示從0%到100%到200%的效果
filter:drop-show();
filter:drop-show(x y 10px #ccc);的作用是在元素背面新增一個陰影,第一個值表示陰影的x軸距離,第二個值表示陰影的y軸距離,第三個值表示元素的陰影模糊程度,第四個值表示元素的陰影顏色
<style>
img {
filter:drop-shadow(16px 16px 10px #ccc);
}
</style>
<body>
<img src="https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="">
</body>
filter:grayscale();
filter:grayscale();取值為百分比,0%時為元素預設狀態,100%時元素為灰度影象,可用於黑白圖片切換
<style>
img {
filter:grayscale(0%);
}
</style>
<body>
<img src="https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="">
</body>
元素0%和100%的效果
filter:hue-rotate();
filter:hue-rotate(0deg);主要用於給元素應用色相旋轉0deg為元素預設狀態,360deg為一個週期
<style>
img {
filter:hue-rotate(0deg)
}
</style>
<body>
<img src="https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="">
</body>
演示從0deg到360deg的效果
filter:invert();
filter:invert()主要用於反轉元素,取值為0%時為元素預設狀態,取值為100%時反轉元素狀態
<style>
img {
filter:invert(0%);
}
</style>
<body>
<img src="https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="">
</body>
filter:saturate();
filter:saturate()用於轉換元素飽和度的,取值為0時為完全不飽和,元素呈灰色,取值為100%時元素為預設狀態,取值大於100%時為更高的飽和度
<style>
img {
filter:saturate(0%);
}
</style>
<body>
<img src="https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="">
</body>
演示0%，100%，200%的效果
filter:sepia();
filter:sepia()主要用於將元素轉換為深褐色,取值為0-1，0表示元素預設狀態,1表示元素為深褐色
<style>
img {
filter:sepia(0);
}
</style>
<body>
<img src="https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="">
</body>
演示0和1效果