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

使用 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学习笔记 】

posted @ 2019-10-20 17:11  半虹  阅读(307)  评论(0)  编辑  收藏  举报