如何用一行代码实现网站变灰色?

filter语法:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

(简单介绍几个)

none:是默认值没有效果。 blur(px):给图像设置高斯n模糊 brightness(%):使图片看起来更亮或者更暗,值是0%图像会全黑,值是100%图像无变化,值超过100%图片会比原来更亮 contrast(%):调整图片的对比度。值是0%图像会全黑,值是100%,图像不变,值超过100%图像的对比更明显。 drop-shadow(h-shadow v-shadow blur spread color): 给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 grayscale(%):(这个就是那个神奇的属性)将图像转换为灰度图像。值值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

下面给看一看效果:

filter: none ; filter:blur(5px); filter:brightness(2.5); 这个有点像摄影上面的曝光强度 filter:contrast(208%);像不像照片上的对比度增大 filter:grayscale(1);这一个就是灰色系,如果想要用在全局那么就要加在html上 这个是fiter的所有语法,是不是CSS也可以用来调照片了呢?

资料参考:

菜鸟教程: MDN官网:

经验分享 程序员 微信小程序 职场和发展