CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果) |
您所在的位置:网站首页 › 儿歌鉴赏的三个方法有哪些 › CSS:filter滤镜 详解(用法 + 代码 + 例子 + 效果) |
文章目录
filter 滤镜blur() 模糊度例子 渐变光晕
brightness() 元素亮度contrast() 对比度grayscale() 元素灰度hue-rorate() 色相opacity() 透明度invert() 反转颜色saturate() 饱和度
backdrop-filter 蒙版,滤镜例子 卷轴展开
filter 滤镜
动图为效果添加前后对比。 经常用ps的应该知道这些的属性的含义,可以自己试一试看看不同参数都有什么样的效果。 blur() 模糊度作用是调整模糊度,单位像素。 filter: blur(10px);其实是两个相同的div叠加,其中一个加上了模糊度。 作用是调整元素的亮度,单位百分数或小数,小于1暗,大于亮。 filter: brightness(0.5);作用是调整元素的对比度,单位是百分数。 大于1提高对比度,小于1降低对比度。 这里加个图片吧,更好的展示此效果。 filter: contrast(2);作用是调整元素的灰度,单位是百分数。 最大是百分之百。 网站需要在特殊节日变成灰色就可以给body加上这个属性。 让整个网站变成灰色调。 filter: grayscale(1);调整元素的色相,单位是角度。 filter: hue-rotate(80deg);调整元素的透明度,单位是百分数。 filter: opacity(0.5);invert() 调整元素的反转输入颜色,单位是百分数。 filter: invert(1);改变图像饱和度。值为 0% 则是完全不饱和,值为 100% 则图像无变化。超过 100% 则增加饱和度。 filter: saturate(2);与filter用法相同,只不过其是对其后面元素起作用的。 可以理解为filter作用于物体,而backdrop-filter相当于一个幕布,遮住的才会变化。还是不理解没关系,看下面的例子就明白了。 例子 卷轴展开![]() |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |