css filter属性详解
文章中codepen例子,无法实时预览,可以在这里获得更好阅读体验。
最近琢磨着把网站主题色更改一下,看到了一篇文章Dark Mode in One Line of Code,作者讲述了如何用一句代码将网站主题色更改成相反色,这样网站就可以拥有有白天模式和黑夜模式了。
html {
filter: invert(1);
}
使用上面的代码,可以很方便的将页面颜色反转,达到黑夜模式的效果。但是我并不推荐以这种方式去给网站增加黑夜模式,因为这句代码会将页面中的图片的像素颜色也进行反转,所以效果并不是很好。
但是filter属性的确很强大,所以我就在这里介绍一下这个属性。
一.语法
MDN中是这样描述的:
The
filter
CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
翻译过来就是,filter
属性可以为元素添加模糊或颜色偏移等图形效果。一般用来调整图片、背景和边框的渲染。
具体语法如下:
filter: <filter-function> [<filter-function>]* | none
filter函数有:grayscale
、blur
、sepia
、saturate
、opacity
、brightness
、contrast
、hue-rotate
和invert
。大部分函数的参数范围为0-1数字之间,其中blur
函数参数为任意数字后接px
单位,hue-rotate
函数参数为一个整数后接deg
单位。
二.filter函数
grayscale
grayscale
用于调整元素的灰度值。参数范围为0-1,0表示无效果,1表示灰度最大。
See the Pen
css filter: grayscale by Pengfei Wang (
@AhCola) on
CodePen.
第一张图片filter: grayscale(1)
。
blur
blue
用于调整图片模糊度的。参数为大于0的数字,后接px
单位。
See the Pen
css filter: blur by Pengfei Wang (
@AhCola) on
CodePen.
第一张图片filter: blur(5px)
。
sepia
sepia
用于调整元素的褐色程度。参数范围为0-1。
See the Pen
css filter: sepia by Pengfei Wang (
@AhCola) on
CodePen.
第一张图片filter: sepia(1)
。
saturate
调整元素的饱和度。参数范围为0-1。
See the Pen
css filter: saturate by Pengfei Wang (
@AhCola) on
CodePen.
第一张图片filter: saturate(0)
,第二张图片filter: saturate(1)
,饱和度为0与灰度值为1效果类似。
opacity
调整元素的透明度。参数范围为0-1,0表示完全透明,1表示完全不透明。
See the Pen
css filter: opacity by Pengfei Wang (
@AhCola) on
CodePen.
第一张图片filter: opacity(0.2)
,第二张图片filter: opacity(1)
。css也有一个opacity属性可以调整元素透明度,用法一样。
brightness
brightness
用于调整元素的亮度。范围为0-1,0表示全黑,1表示最亮。
See the Pen
css filter: brightness by Pengfei Wang (
@AhCola) on
CodePen.
第一张图片filter: brightness(0)
,显示为黑色。
contrast
调整元素的对比度。默认值为1,表示与原图一致,取值小于1时,对比度降低,取值大于1时表示对比度增大。
See the Pen
css filter: contrast by Pengfei Wang (
@AhCola) on
CodePen.
图片一filter: contrast(0.2)
,图片二filter: contrast(3)
,图片三为默认值1。
hue-rotate
色相旋转,取值为角度值,单位为deg
。
See the Pen
css filter: hue-rotate by Pengfei Wang (
@AhCola) on
CodePen.
第一张图片filter: hue-rotate(40deg)
。
invert
将元素的颜色反转。参数范围为0-1,默认值为0。
See the Pen
css filter: invert by Pengfei Wang (
@AhCola) on
CodePen.
第一张图片filter: invert(1)
。
附:参考资料
- css filters: https://davidwalsh.name/css-filters
- dark mode: https://davidwalsh.name/dark-mode-invert-filter
- mdn: filter
(完)
今天的文章css filter属性详解分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/29962.html