CSS3滤镜

1 滤镜

之前我们要处理一张图片的取色，模糊，褐色等效果必须使用 Photoshop 处理完后保存多张图片，而 CSS3 滤镜的出现使我们在网站中想要轻松实现这些效果变得可能。只需要通过 filter 滤镜的各种属性就能轻松实现，如：grayscale(灰色)、sepia(褐色)、saturate(饱和度)、blur(模糊)…等

1.1 定义和使用

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

filter 滤镜，借鉴了 Photoshop 的滤镜效果，在 ps 中主要用来设置图层图片的模糊，颜色的高亮，对比度等效果，在 css 中滤镜通常用于调整图像，背景和边框的渲染和效果。

语法：

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

取值：

• none：默认

• blur(px)：设置高斯模糊，值越大越模糊。

  • 默认：0

  • 可设置 px

  • 不能设置百分比

• brightness(%)：给图片应用一种线性乘法，使其看起来更亮或更暗。

  • 默认：1，图像无变化

  • 0%，图像会全黑

  • 大于 100%，图像会比原来更亮。

• contrast(%)：调整图像的对比度。

  • 默认：1，图像无变化

  • 0%，图像会全黑

• drop-shadow(offset-x offset-y blur-radius color)：给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，以特定颜色画出的遮罩图的偏移版本。和 box-shadow 效果一样，但是区别在于他不能使用 inset 设置内阴影，也不能同时设置多个阴影

  • offset-x offset-y (必须) 这是设置阴影偏移量的两个 length 值。

  • blur-radius：表示投影的模糊半径值，值越大，越模糊，则阴影会变得更大更淡。不允许负值，若未设定，默认是 0

  • color：表示投影的颜色，可以使用颜色关键字(red)，十六进制法(#fff)，rgb，rgba 等写法

• grayscale(%)：将图像转换为灰度图像。

  • 默认：0，图像无变化

  • 100%，完全转为灰度图像

• hue-rotate(deg)：给图像应用色相旋转。

  • 默认：0deg，图像无变化

  • 360deg 的值相当于又绕一圈

• invert(%)：反转输入图像。

  • 默认：0，图像无变化

  • 100%，完全反转

• opacity(%)：转化图像的透明程度。

  • 默认：1，图像无变化

  • 0%，完全透明

• saturate(%)：转换图像饱和度。

  • 默认：1，图像无变化

  • 0%，完全不饱和

• sepia(%)：将图像转换为深褐色

  • 默认：0，图像无变化

  • 100%，完全是深褐色

• url()：函数接收一个 XML 文件，该文件是一个 SVG filter，并且包含一个 ID 值 来指定哪一个滤镜

• initial：设置属性为默认值

• inherit：从父元素继承该属性

1.2 案例

<style>
    img {
        float: left;
        width: 300px;
        margin: 0 30px 30px 0
    }
​
    .blur {
        filter: blur(4px);
    }
​
    .brightness {
        filter: brightness(0.30);
    }
​
    .contrast {
        filter: contrast(180%);
    }
​
    .grayscale {
        filter: grayscale(100%);
    }
​
    .huerotate {
        filter: hue-rotate(180deg);
    }
​
    .invert {
        filter: invert(100%);
    }
​
    .opacity {
        filter: opacity(50%);
    }
​
    .saturate {
        filter: saturate(7);
    }
​
    .sepia {
        filter: sepia(100%);
    }
​
    .shadow {
        filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, .6));
    }
​
    .box-shadow {
        box-shadow: 2px 2px 10px rgba(0, 0, 0, .6)
    }
​
    .url {
        filter: url(./imgs/svg.svg#blur)
    }
</style>
<img src="https://www.runoob.com/try/demo_source/pineapple.jpg" />
<img class="blur" src="https://www.runoob.com/try/demo_source/pineapple.jpg" />
<img class="brightness" src="https://www.runoob.com/try/demo_source/pineapple.jpg" />
<img class="contrast" src="https://www.runoob.com/try/demo_source/pineapple.jpg" />
<img class="grayscale" src="https://www.runoob.com/try/demo_source/pineapple.jpg" />
<img class="huerotate" src="https://www.runoob.com/try/demo_source/pineapple.jpg" />
<img class="invert" src="https://www.runoob.com/try/demo_source/pineapple.jpg" />
<img class="opacity" src="https://www.runoob.com/try/demo_source/pineapple.jpg" />
<img class="saturate" src="https://www.runoob.com/try/demo_source/pineapple.jpg" />
<img class="sepia" src="https://www.runoob.com/try/demo_source/pineapple.jpg" />
<img class="shadow" src="https://www.runoob.com/try/demo_source/pineapple.jpg" />
<img class="shadow" src="http://www.ayunhe.com/content/plugins/rawait-theme/static/images/logo.png" />
<img class="box-shadow" src="http://www.ayunhe.com/content/plugins/rawait-theme/static/images/logo.png" />
<img class="url" src="https://www.runoob.com/try/demo_source/pineapple.jpg" />

<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events" baseProfile="full">
    <defs>
        <!-- 此处定义滤镜 -->
        <filter id="blur">
            <!-- 相当于定义了一个 blur(5px) -->
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
    </defs>
</svg>