.brighten { brightness: 1.2; }
上面的代码演示了如何使用brightness属性来增加元素的亮度。值1表示原始亮度,值大于1表示增加亮度,值小于1表示降低亮度。在上面的例子中,元素的亮度增加了20%。
还可以使用CSS的filter属性,使用brightness()函数来改变元素亮度。
.brighten { filter: brightness(1.2); }
使用brightness()函数的好处是可以同时使用多个过滤器函数,比如改变亮度和对比度。
.brighten { filter: brightness(1.2) contrast(1.2); }
这样就可以同时增加元素的亮度和对比度。这对于在低亮度环境下显示文本非常有帮助。
需要注意的是,增加亮度通过增加元素的RGB值实现。如果值过高,可能导致元素的颜色偏白或失真。因此需要谨慎使用brightness属性。