css filter
需要前置了解的
作用
为元素指定各种滤镜效果，比如模糊、灰度、明暗度、颜色偏移等。
filter 属性的含义
| 属性 | 说明 |
|---|---|
| brightness() | 让图像更明亮或更暗淡，0% 将创建全黑图像，100% 展示原图，大于 100%展示更明亮的图片效果。 |
| contrast() | 增加或减少图像的对比度，值是 0%图像全灰图像，没有对比度。100% 展示原图，大于 100%展示对比度更高的图片效果。 |
| saturate() | 超饱和或去饱和输入的图像，值为 0% 则是完全不饱和，完全转为灰度图像，100% 展示原图，大于 100% 则有更高的饱和度。 |
| grayscale() | 改变图像灰度，值在 0% 到 100% 之间，值为 0%展示原图，值为 100% 则完全转为灰度图像。 |
| blur() | 模糊图像。传入值单位为 px |
| drop-shadow() | 给图片添加阴影，与 box-shadow 的属性值一样。 |
| hue-rotate() | 改变图整体色调，angle 设定图像会被调整的色环角度值。值为 0deg 展示原图，大于 360deg 相当于又绕一圈。 |
| invert() | 反转图像颜色,值在 0% 和 100% 之间,100% 的价值是完全反转。值为 0% 则图像无变化。 |
| opacity() | 改变图像透明度，值在 0% 和 100% 之间，值为 0% 则是完全透明，值为 100% 则图像无变化。 |
| sepia() | 将图像转为棕褐色，值在 0% 到 100% 之间，值为 100% 则完全是深褐色的，值为 0% 图像无变化。 |
filter 各属性值效果
filter 函数使用方法
css
/* <filter-function> values 使用单个滤镜*/
filter: blur(5px);
/* Multiple filters 使用多个滤镜*/
filter: contrast(175%) brightness(3%);
/* Use no filter 不使用滤镜 */
filter: none;
filter 应用实例
不规则投影
box-shadow 能够完美地给矩形或者 border-radius 生成的形状增加投影效果。但是当元素添加了伪元素或者半透明的装饰后，box-shadow 会忽视透明的部分，导致投影效果不佳。
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5)
shadow()滤镜为半透明图片、伪元素等添加阴影效果。注意：drop-shadow 会给任何非透明部分加上阴影。
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
毛玻璃效果
我们不能直接对元素本身进行模糊处理，就对一个伪元素进行处理，然后将其定位到元素的下层，将伪元素的背景和 body 背景无缝重合，对伪元素进行模糊处理。
- 首先添加一个伪元素，将其绝对定位，并把所有偏移量置为 0，这样就可以将它完整的覆盖到.content 上了。
css
.content::before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
}
- 将伪元素的背景设为和 body 元素背景完全重叠。
css
body,
.content::before {
background: url(bg.jpg);
background-attachment: fixed;
}
- 伪元素添加模糊属性,由于模糊效果在边缘处会逐渐消退，需要让伪元素相对宿主元素的尺寸向外扩大至少 20px;同时宿主元素把多余的模糊区域裁剪掉。
css
.content {
overflow: hidden;
}
.content::before {
filter: blur(30px);
margin: -50px;
}
毛玻璃
灰度效果
给根元素设置 filter: grayscale(100%)
灰度效果