图片滤镜不完全指南

这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战

前言

css3 中新支持的属性可以很快捷地为图片添加有趣的滤镜，filter 将模糊或颜色偏移等图形效果应用于元素。通常用于调整图像，背景和边框的渲染。

十种 filter 滤镜函数

高斯模糊

blur()：默认值为 0，较大的值将产生更多的模糊，不接受百分值。

<article>
    <h3>高斯模糊</h3>
    <figure>
        <img style="filter:blur(0);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:blur(0)</figcaption>
    </figure>
    <figure>
        <img style="filter:blur(1px);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:blur(1px)</figcaption>
    </figure>
    <figure>
        <img style="filter:blur(2px);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:blur(2px)</figcaption>
    </figure>
    <figure>
        <img style="filter:blur(3px);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:blur(3px)</figcaption>
    </figure>
</article>

brightness 明暗调节

brightness() 使其看起来或多或少地变得明亮，默认值为 1，和 100% 相等，0% 是全黑图像，值越大，则更明亮

<article>
    <h3>明暗调节：使其看起来或多或少地变得明亮</h3>
    <figure>
        <img style="filter:brightness(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:brightness(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:brightness(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:brightness(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:brightness(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:brightness(100%)</figcaption>
    </figure>
    <figure>
        <img style="filter:brightness(150%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:brightness(150%)</figcaption>
    </figure>
</article>

contrast 对比度调节

contrast() 对比度调节，默认值为 1，和 100% 相等，0% 是全灰图像，值越大，意味着更低的对比

<article>
    <h3>对比度调节</h3>
    <figure>
        <img style="filter:contrast(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:contrast(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:contrast(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(100%)</figcaption>
    </figure>
    <figure>
        <img style="filter:contrast(150%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(150%)</figcaption>
    </figure>
</article>

drop-shadow 阴影效果

drop-shadow() 阴影效果，接受 <offset-x> <offset-y> (必须)、<blur-radius>(可选)、<color>(可选) 参数

• <offset-x> 设定水平方向距离
• <offset-y> 设定垂直方向距离
• <blur-radius> 值越大，越模糊，默认值是 0
• <color> 阴影颜色

<article>
    <h3>阴影效果</h3>
    <figure>
        <img style="filter:drop-shadow(0 0 0 black);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>blur-radius:0</figcaption>
    </figure>
    <figure>
        <img style="filter:drop-shadow(0 0 3px black);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>blur-radius:3px</figcaption>
    </figure>
    <figure>
        <img style="filter:drop-shadow(0 0 6px black);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>blur-radius:6px</figcaption>
    </figure>
    <figure>
        <img style="filter:drop-shadow(0 0 9px black);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>blur-radius:9px</figcaption>
    </figure>
</article>

grayscale 图像灰度

grayscale() 图像灰度。通过转换的比例改变图像灰度的大小， 默认值是 0， 0% 无变化，100% 全灰度图像

<article>
    <h3>图像灰度</h3>
    <figure>
        <img style="filter:grayscale(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:grayscale(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:grayscale(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:grayscale(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:grayscale(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:grayscale(100%)</figcaption>
    </figure>
    <figure>
        <img style="filter:grayscale(0);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:grayscale(0)</figcaption>
    </figure>
</article>

hue-rotate 色相旋转

hue-rotate() 色相旋转。通过调整色环的角度值改变色相， 默认值是 0deg， 0deg 无变化，360deg 相当于绕了一圈回到起点

<article>
    <h3>色相旋转</h3>
    <figure>
        <img style="filter:hue-rotate(0deg);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:hue-rotate(0deg)</figcaption>
    </figure>
    <figure>
        <img style="filter:hue-rotate(90deg);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:hue-rotate(90deg)</figcaption>
    </figure>
    <figure>
        <img style="filter:hue-rotate(180deg);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:hue-rotate(180deg)</figcaption>
    </figure>
    <figure>
        <img style="filter:hue-rotate(270deg);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:hue-rotate(270deg)</figcaption>
    </figure>
    <figure>
        <img style="filter:hue-rotate(360deg);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:hue-rotate(360deg)</figcaption>
    </figure>
</article>

invert 反转

invert() 反转。默认值是 0， 0% 无变化，100% 完全反转

<article>
    <h3>反转</h3>
    <figure>
        <img style="filter:invert(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:invert(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:invert(25%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:invert(25%)</figcaption>
    </figure>
    <figure>
        <img style="filter:invert(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:invert(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:invert(75%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:invert(75%)</figcaption>
    </figure>
    <figure>
        <img style="filter:invert(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:invert(100%)</figcaption>
    </figure>
</article>

opacity 图像透明

opacity() 函数设置图像的透明。通过调整百分比改变转换的比例，0% 完全透明，100% 无变化

<article>
    <h3>图像的透明程度</h3>
    <figure>
        <img style="filter:opacity(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:opacity(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:opacity(25%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:opacity(25%)</figcaption>
    </figure>
    <figure>
        <img style="filter:opacity(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:opacity(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:opacity(75%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:opacity(75%)</figcaption>
    </figure>
    <figure>
        <img style="filter:opacity(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:opacity(100%)</figcaption>
    </figure>
</article>

saturate 图像饱和度

saturate() 图像饱和度。通过调整百分比改变转换的比例，默认值为 1，0% 完全不饱和，100% 无变化

<article>
    <h3>图像饱和度</h3>
    <figure>
        <img style="filter:saturate(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:saturate(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:saturate(25%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:saturate(25%)</figcaption>
    </figure>
    <figure>
        <img style="filter:saturate(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:saturate(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:saturate(75%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:saturate(75%)</figcaption>
    </figure>
    <figure>
        <img style="filter:saturate(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:saturate(100%)</figcaption>
    </figure>
</article>

sepia 将图像转换为深褐色

sepia() 将图像转换为深褐色。通过调整百分比改变转换的比例，默认值为 0，0% 无变化，100% 完全是深褐色

<article>
    <h3>将图像转换为深褐色</h3>
    <figure>
        <img style="filter:sepia(0%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:sepia(0%)</figcaption>
    </figure>
    <figure>
        <img style="filter:sepia(25%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:sepia(25%)</figcaption>
    </figure>
    <figure>
        <img style="filter:sepia(50%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:sepia(50%)</figcaption>
    </figure>
    <figure>
        <img style="filter:sepia(75%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:sepia(75%)</figcaption>
    </figure>
    <figure>
        <img style="filter:sepia(100%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:sepia(100%)</figcaption>
    </figure>
</article>

复合函数

可以组合任意数量的函数渲染出各种滤镜

<article>
    <h3>复合函数</h3>
    <figure>
        <img style="filter:contrast(175%) brightness(3%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(175%) brightness(3%)</figcaption>
    </figure>
    <figure>
        <img style="filter:contrast(75%) brightness(9%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(75%) brightness(9%)</figcaption>
    </figure>
    <figure>
        <img style="filter:contrast(100%) brightness(12%);" src="https://picsum.photos/id/511/4608/3456" alt="" width="200" height="150">
        <figcaption>filter:contrast(100%) brightness(12%)</figcaption>
    </figure>
</article>

欢迎关注我的公众号：A纲 Coder，获得日常干货推送。最后再次感谢您的阅读，我是程序猿憨憨