CSS3之filter(滤镜) 属性
2020-07-21 04:14
916 查看
前段时间,4月4号那天,新冠肺炎哀悼日那天,好多网站和APP,主题都变成了灰色,当时就感觉这些网站和APP太有心了。我一直以为这是一套主题呢,后来我查了下实现方式,原来css3有个属性filter,一行代码就能实现。知道了这个方式后也只是记到了脑子里,并没有写下来。前几天一个需求,弹窗背景要做成模糊半透明的效果,查了下实现方式,还是用到了那个filter属性,感觉有必要把这个属性记录下来,加深自己记忆的同时,也分享给大家。
1、主题变成灰色
首先看下效果图,正常情况下
变灰之后
实现方式其实很简单,运用了css3的filter属性,直接上代码:
#box{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); }
给最外层div设置这个样式,就实现了整站变灰的效果。
2、弹窗背景模糊半透明的效果
设计图是这样的,弹窗背景要半透明,能看到底层的东西,但是底层的东西必须是模糊的。
实现这个效果也很简单,还是用filter属性,具体代码如下:
.bg{ -webkit-filter: blur(3px); /* Chrome, Safari, Opera */ filter: blur(3px); }
当我用了这两个效果之后,感觉这个filter太强大了,太好用了。就专门查资料,学了一下这个filter,一看不得了,它不仅能实现上面这两种效果,还有很多其他的效果。下面把我学到的记录一下。
// 设置高斯模糊,值越大,越模糊 .blur { -webkit-filter: blur(4px); filter: blur(4px); } // 给图片应用一种线性乘法,使其看起来更亮或更暗。 // 如果值是0%,图像会全黑。 // 值是100%,则图像无变化。 // 其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。 // 如果没有设定值,默认是1。 .brightness { -webkit-filter: brightness(30%); filter: brightness(30%); } // 调整图像的对比度。 // 值是0%的话,图像会全黑。 // 值是100%,图像不变。 // 值可以超过100%,意味着会运用更低的对比。 // 若没有设置值,默认是1。 .contrast { -webkit-filter: contrast(180%); filter: contrast(180%); } // 将图像转换为灰度图像。值定义转换的比例。 // 值为100%则完全转为灰度图像, // 值为0%图像无变化。 // 值在0%到100%之间,则是效果的线性乘子。 // 若未设置,值默认是0; .grayscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); } // 给图像应用色相旋转。 // "angle"一值设定图像会被调整的色环角度值。 // 值为0deg,则图像无变化。 // 若值未设置,默认值是0deg。 // 该值虽然没有最大值,超过360deg的值相当于又绕一圈。 .huerotate { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); } // 反转输入图像。值定义转换的比例。 // 100%的价值是完全反转。 // 值为0%则图像无变化。 // 值在0%和100%之间,则是效果的线性乘子。 // 若值未设置,值默认是0。 .invert { -webkit-filter: invert(100%); filter: invert(100%); } // 转化图像的透明程度。值定义转换的比例。 // 值为0%则是完全透明, // 值为100%则图像无变化。 // 值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 // 若值未设置,值默认是1。 // 该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。 .opacity { -webkit-filter: opacity(50%); filter: opacity(50%); } // 转换图像饱和度。值定义转换的比例。 // 值为0%则是完全不饱和, // 值为100%则图像无变化。 // 其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 // 若值未设置,值默认是1。 .saturate { -webkit-filter: saturate(7); filter: saturate(7); } // 将图像转换为深褐色。值定义转换的比例。 // 值为100%则完全是深褐色的, // 值为0%图像无变化。 // 值在0%到100%之间,则是效果的线性乘子。 // 若未设置,值默认是0; .sepia { -webkit-filter: sepia(100%); filter: sepia(100%); }
相关文章推荐
- CSS3中 filter(滤镜) 属性的用法!
- Css3学习之filter(滤镜)属性详解
- CSS3 filter滤镜属性详解
- web前端入门到实战:CSS3 filter(滤镜)属性
- CSS3 filter滤镜属性小项目——图片高斯模糊、高亮、对比度、灰度、色调、色彩旋转、透明、饱和、褐色调整
- css3中强大的filter(滤镜)属性
- css3 滤镜filter属性
- CSS3 filter(滤镜) 属性
- CSS3 filter(滤镜) 属性
- css3中强大的filter(滤镜)属性
- css3中强大的filter(滤镜)属性
- 关于CSS3的filter(滤镜) 属性
- CSS3 filter(滤镜)属性
- css3的filter(滤镜)属性
- 使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
- Css中的filter常用滤镜属性及语句大全
- CSS3 filter(滤镜)
- CSS3 filter(滤镜用法)
- css3 filter滤镜
- CSS3滤镜--filter使用