美文网首页
巧用 CSS3 filter(滤镜) 属性

巧用 CSS3 filter(滤镜) 属性

作者: 子瞻是也 | 来源:发表于2021-06-30 17:29 被阅读0次

    效果预览

    这里仅展示黑白效果。

    filter: grayscale(100%);
    
    image image image image

    原文链接:CSS3 filter(滤镜) 属性

    定义和使用

    filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。

    默认值 none
    继承 no
    动画支持 是。详细可查阅 CSS 动画
    版本 CSS3

    浏览器支持

    表格中的数字表示支持该方法的第一个浏览器的版本号。

    紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

    属性 filter
    image 18.0 -webkit-
    image 不支持
    image 35.0
    image 6.0 -webkit-
    image 15.0 -webkit-

    注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

    CSS 语法

    
    filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
    
    

    Filter 函数

    注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。

    Filter 描述
    none 默认值,没有效果。
    blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;
    如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。
    brightness(%) 给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。
    其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。
    contrast(%) 调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。
    drop-shadow(h-shadow v-shadow blur spread color) 给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值,除了 "inset" 关键字是不允许的。该函数与已有的 box-shadow box-shadow 属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下:
    <offset-x> <offset-y>(必须)
    这是设置阴影偏移量的两个 <length>值。 <offset-x>设定水平方向距离, 负值会使阴影出现在元素左边。 <offset-y>设定垂直距,负值会使阴影出现在元素上方,查看<length>可能的单位,如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>,会有模糊效果)。
    <blur-radius> (可选)
    这是第三个code <length>值。 值越大,越模糊,则阴影会变得更大更淡。不允许负值 若未设定,默认是0 (则阴影的边界很锐利)。
    <spread-radius> (可选)
    这是第四个 <length>值。 正值会使阴影扩张和变大,负值会是阴影缩小。若未设定,默认是0 (阴影会与元素一样大小)。
    注意: Webkit , 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。
    <color> (可选)
    查看 <color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用colorcolor属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
    grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。
    hue-rotate(deg) 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
    invert(%) 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。
    opacity(%) 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。
    saturate(%) 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。
    sepia(%) 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;
    url() URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。
    例如:
    filter: url(svg-url#element-id)
    initial 设置属性为默认值,可参阅: CSS initial 关键字
    inherit 设置属性为默认值,可参阅: CSS inherit 关键字

    实例

    初始图片如下:

    image

    模糊实例

    图片使用高斯模糊效果:

    
    img {
    
        -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    
        filter: blur(5px);
    
    }
    
    

    效果如下:

    image

    注意: Internet Explorer 不支持 filter 属性。

    Brightness 函数实例

    使图片变亮:

    
    img {
    
        -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    
        filter: brightness(200%);
    
    }
    
    

    效果如下:

    image

    Contrast 函数实例

    调整图像的对比度:

    
    img {
    
        -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    
        filter: contrast(200%);
    
    }
    
    

    效果如下:

    image

    drop-shadow 函数实例

    给图像设置一个阴影效果:

    
    img {
    
        -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    
        filter: drop-shadow(8px 8px 10px red);
    
    }
    
    

    效果如下:

    image

    Grayscale 函数实例

    将图像转换为灰度图像:

    
    img {
    
        -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    
        filter: grayscale(50%);
    
    }
    
    

    效果如下:

    image

    hue-rotate() 函数实例

    给图像应用色相旋转:

    
    img {
    
        -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
    
        filter: hue-rotate(90deg);
    
    }
    
    

    效果如下:

    image

    Invert 函数实例

    反转输入图像:

    
    img {
    
        -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    
        filter: invert(100%);
    
    }
    
    

    效果如下:

    image

    Opacity 函数实例

    转化图像的透明程度:

    
    img {
    
        -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    
        filter: opacity(30%);
    
    }
    
    

    效果如下:

    image

    Saturate 函数实例

    转换图像饱和度:

    
    img {
    
        -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
    
        filter: saturate(800%);
    
    }
    
    

    效果如下:

    image

    Sepia 函数实例

    将图像转换为深褐色:

    
    img {
    
        -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
    
        filter: sepia(100%);
    
    }
    
    

    效果如下:

    image

    复合函数

    使用多个滤镜,每个滤镜使用空格分隔。

    {% note red no-icon %} 注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。{% endnote %}

    
    img {
    
        -webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, Opera */
    
        filter: contrast(200%) brightness(150%);
    
    }
    
    

    效果如下:

    image

    所有滤镜实例

    使用多个滤镜,每个滤镜使用空格分隔。

    注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。

    
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <style>
    
    img {
    
        width: 300.666px;
    
        height: 240px;
    
    }
    
    .blur {-webkit-filter: blur(4px);filter: blur(4px);}
    
    .brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);}
    
    .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
    
    .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
    
    .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
    
    .invert {-webkit-filter: invert(100%);filter: invert(100%);}
    
    .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
    
    .saturate {-webkit-filter: saturate(7); filter: saturate(7);}
    
    .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
    
    .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
    
    </style>
    
    </head>
    
    <body>
    
    <p><strong>注意:</strong> Internet Explorer 不支持 filter 属性。</p>
    
    <img src="https://7.dusays.com/2021/06/25/193f0b161f865.jpg" alt="Pineapple">
    
    <img class="blur" src="https://7.dusays.com/2021/06/25/193f0b161f865.jpg" alt="Pineapple">
    
    <img class="brightness" src="https://7.dusays.com/2021/06/25/193f0b161f865.jpg" alt="Pineapple">
    
    <img class="contrast" src="https://7.dusays.com/2021/06/25/193f0b161f865.jpg" alt="Pineapple">
    
    <img class="grayscale" src="https://7.dusays.com/2021/06/25/193f0b161f865.jpg" alt="Pineapple">
    
    <img class="huerotate" src="https://7.dusays.com/2021/06/25/193f0b161f865.jpg" alt="Pineapple">
    
    <img class="invert" src="https://7.dusays.com/2021/06/25/193f0b161f865.jpg" alt="Pineapple">
    
    <img class="opacity" src="https://7.dusays.com/2021/06/25/193f0b161f865.jpg" alt="Pineapple">
    
    <img class="saturate" src="https://7.dusays.com/2021/06/25/193f0b161f865.jpg" alt="Pineapple">
    
    <img class="sepia" src="https://7.dusays.com/2021/06/25/193f0b161f865.jpg" alt="Pineapple">
    
    <img class="shadow" src="https://7.dusays.com/2021/06/25/193f0b161f865.jpg" alt="Pineapple">
    
    </body>
    
    </html>
    
    

    效果如下:

    image

    一些常见效果

    1. 电影效果
      滤镜中的brightness用于调整图像的明暗度。默认值是1;小于1时图像变暗,为0时显示为全黑图像;大于1时图像显示比原图更明亮。
      我们可以通过调整 背景图的明暗度 和 文字的透明度 ,来模拟电影谢幕的效果。
    <div class="container">
      <div class="ethan"></div>
      <div class="p-t">
        <p>如果生活中有什么使你感到快乐,那就去做吧</p>
        <br>
        <p>不要管别人说什么</p>
      </div>
    </div>
    
    .ethan{
        height: 100%;
        width: 100%;
        position: absolute;
        background: url('./images/movie.webp') no-repeat;
        background-size: cover;
        /* forwards当动画完成后,保持最后一帧的状态 */
        animation: fade-away 2.5s linear forwards;   
    }
    .p-t{
        position: absolute;
        line-height: 55px;
        color: #fff;
        font-size: 36px;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
        animation: show 2s cubic-bezier(.74,-0.1,.86,.83) forwards;
    }
    /* 背景图的明暗度动画 */
    @keyframes fade-away {    
        30%{
            filter: brightness(1);
        }
        100%{
            filter: brightness(0);
        }
    }
    /* 文字的透明度动画 */
    @keyframes show{        
        20%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
    
    1. 模糊效果
      在下面的单词卡片中,当鼠标hover到某一张卡片上时,其他卡片背景模糊,使用户焦点集中到当前卡片。
    <ul class="cards">
        <li class="card">
          <p class="title">Flower</p>
          <p class="content">The flowers mingle to form a blaze of color.</p>
        </li>
        <li class="card">
          <p class="title">Sunset</p>
          <p class="content">The sunset glow tinted the sky red.</p>
        </li>
        <li class="card">
          <p class="title">Plain</p>
          <p class="content">The winds came from the north, across the plains, funnelling down the valley. </p>
        </li>
     </ul>
    

    实现的方式,是将背景加在 .card 元素的伪类上,当元素不是焦点时,为该元素的伪类加上滤镜。

    .card:before{
        z-index: -1;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: 20px;
        filter: blur(0px) opacity(1);
        transition: filter 200ms linear, transform 200ms linear;
    }
    /*
        这里不能将滤镜直接加在.card元素,而是将背景和滤镜都加在伪类上。
        因为,父元素加了滤镜,它的子元素都会一起由该滤镜改变。
        如果滤镜直接加在.card元素上,会导致上面的文字也变模糊。
    */
    /* 通过css选择器选出非hover的.card元素,给其伪类添加模糊、透明度和明暗度的滤镜  */
    .cards:hover > .card:not(:hover):before{    
        filter: blur(5px) opacity(0.8) brightness(0.8);
    }
    /* 对于hover的元素,其伪类增强饱和度,尺寸放大  */
    .card:hover:before{
        filter: saturate(1.2);  
        transform: scale(1.05);
    }
    
    1. 褪色效果
      褪色效果可以打造出一种怀旧的风格。下面这组照片墙,我们通过sepia滤镜将图像基调转换为深褐色,再通过降低 饱和度 saturate 和 色相旋转 hue-rotate 微调,模拟老照片的效果。
    .pic{
        border: 3px solid #fff;
        box-shadow: 0 10px 50px #5f2f1182;
        filter: sepia(30%) saturate(40%) hue-rotate(5deg);
        transition: transform 1s;
    }
    .pic:hover{
        filter: none;
        transform: scale(1.2) translateX(10px);
        z-index: 1;
    }
    
    1. 水波效果
      filter还可以通过 URL 链接到 SVG 滤镜元素,SVG滤镜元素MDN
      下面的水波纹效果就是基于 SVG 的feTurbulence滤镜实现的,原理参考了 说说SVG的feTurbulence滤镜SVG feTurbulence滤镜深入介绍 ,有兴趣的朋友可以深入阅读。
      feTurbulence滤镜 借助 Perlin 噪声算法模拟自然界真实事物那样的随机样式。它接收下面5个属性:
      baseFrequency 表示噪声的基本频率参数,频率越高,噪声越密集。
      numOctaves 就表示倍频的数量,倍频的数量越多,噪声看起来越自然。
      seed属性表示feTurbulence滤镜效果中伪随机数生成的起始值,不同数量的seed不会改变噪声的频率和密度,改变的是噪声的形状和位置。
      stitchTiles定义了Perlin噪声在边框处的行为表现。
      type属性值有fractalNoiseturbulence,模拟随机样式使用turbulence
      在这个例子,两个img标签使用同一张图片,将第二个img标签使用scaleY(-1)实现垂直方向的镜像翻转,模拟倒影。
      并且,对倒影图片使用feTurbulence滤镜,通过动画不断改变feTurbulence滤镜的baseFrequency值实现水纹波动的效果。
    <div class="container">
        <img src="images/moon.jpg">
        <img src="images/moon.jpg" class="reflect">
    </div>
    <!--定义svg滤镜,这里使用的是feTurbulence滤镜-->
    <svg width="0" height="0">
        <filter id="displacement-wave-filter">
            <!--baseFrequency设置0.01 0.09两个值,代表x轴和y轴的噪声频率-->  
            <feTurbulence baseFrequency="0.01 0.09">
                <!--这是svg动画的定义方式,通过动画不断改变baseFrequency的值,从而形成波动效果-->
                <animate attributeName="baseFrequency" dur="20s" keyTimes="0;0.5;1" values="0.01 0.09;0.02 0.13;0.01 0.09" repeatCount="indefinite" ></animate>
            </feTurbulence>
            <feDisplacementMap in="SourceGraphic" scale="10" /> 
        </filter>
    </svg>
    
    .container{
        height: 520px;
        width: 400px;
        display: flex;
        clip-path: inset(10px);
        flex-direction: column;
    }
    img{
        height: 50%;
        width: 100%;
    }
    .reflect {
        transform: translateY(-2px) scaleY(-1);
        /* 对模拟倒影的元素应用svg filter
        url中对应的是上面svg filter的id */
        filter: url(#displacement-wave-filter);  
    }
    

    相关文章

      网友评论

          本文标题:巧用 CSS3 filter(滤镜) 属性

          本文链接:https://www.haomeiwen.com/subject/mrwrultx.html