CSS实战笔记(三) 滤镜效果

时间：2019-10-20 20:13:03 收藏：0 阅读：61

使用 CSS3 的 filter 属性，我们可以给图片设置许多有趣的滤镜效果，filter 属性的可选值如下：

blur(length)：模糊度，参数 length 表示屏幕上多少像素融在一起
brightness(percentage)：亮度，默认为 100%，若为 0% 则图片全黑
contrast(percentage)：对比度，默认为 100%，若为 0% 则图片全黑
saturate(percentage)：饱和度，默认为 100%，若为 0% 则完全不饱和
opacity(percentage)：透明度，默认为 100%，若为 0% 则完全透明
invert(percentage)：色彩反转，默认为 0%，若为 100% 则完全反转
hue-rotate(angle)：色相旋转，参数 angle 表示色环角度
grayscale(percentage)：灰度，默认为 0%，若为 100% 则变成黑白图片
sepia(percentage)：褐度，默认为 0%，若为 100% 则变成褐色图片
drop-shadow(offset-x offset-y blur-radius color)：阴影，类似 box-shadow

设置不同的 filter 属性表现出来的效果也不一样，下面我们简单的来看看，设置各个不同的属性表现出来的效果吧

首先准备一张用于测试的图片，这里我们选择 https://pixabay.com 网站提供的无版权图

<!DOCTYPE html>
<html>
<head>
    <style>
        .img-div {
            width: 960px;
            height: 560px;
            background-image: url('https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg');
        }
    </style>
</head>
<body>
    <div class="img-div"></div>
</body>
</html>

技术分享图片

（1）模糊度

.filter-blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

技术分享图片

（2）亮度

.filter-brightness {
    filter: brightness(120%);
    -webkit-filter: brightness(120%);
}

技术分享图片

（3）对比度

.filter-contrast {
    filter: contrast(150%);
    -webkit-filter: contrast(150%);
}

技术分享图片

（4）饱和度

.filter-saturate {
    filter: saturate(180%);
    -webkit-filter: saturate(180%);
}

技术分享图片

（5）透明度

.filter-opacity {
    filter: opacity(20%);
    -webkit-filter: opacity(20%);
}

技术分享图片

（6）色彩反转

.filter-invert {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

技术分享图片

（7）色相旋转

.filter-hue-rotate {
    filter: hue-rotate(180deg);
    -webkit-filter: hue-rotate(180deg);
}

技术分享图片

（8）灰度

.filter-grayscale {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

技术分享图片

（9）褐度

.filter-sepia {
    filter: sepia(100%);
    -webkit-filter: sepia(100%);
}

技术分享图片

（10）阴影

.filter-drop-shadow {
    filter: drop-shadow(10px 10px 20px #000000);
    -webkit-filter: drop-shadow(10px 10px 20px #000000);
}

技术分享图片

【阅读更多 CSS 系列文章，请看 CSS学习笔记】

原文：https://www.cnblogs.com/wsmrzx/p/11708171.html