CSS filter属性

2021-11-27 07:20:18

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" >
</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" >
</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" >
</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" >
</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" >
</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" >
</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" >
</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" >
</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" >
</body>

演示0和1效果