css filter属性详解

css filter属性详解cssfilter属性详解文章中codepen例子,无法实时预览,可以在这里获得更好阅读体验。最近琢磨着把网站主题色更改一下,看到了一篇文章DarkModeinOneLineofCode,作者讲述了如何用一句代码将网站主题色更改成相反色,这样网站就可以拥有有白天模式和黑夜模式了。html{filter:invert(1);}使用上面的代码,可以很方便的将页面颜色反转,达到黑夜模式的效果。但是我并不推荐以这种方式去给网站增加黑夜模式,因为这句代码会将页面中的图片的像素颜

css

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函数有:grayscaleblursepiasaturateopacitybrightnesscontrasthue-rotateinvert。大部分函数的参数范围为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 filter属性详解分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/29962.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注