今天接到修改定制项目UI的需求,将img修改为白色。替换图片太麻烦,从css入手:
img { filter: brightness(0) invert(1); }
解释一下:filter 属性可以应用一系列的图像效果,如模糊、亮度、对比度、颜色反转等。
-
brightness(0) :
brightness滤镜用于调整图像的亮度。brightness(0)会将图像的亮度设为 0,也就是说,图像会变得完全黑暗,所有像素的亮度都会变成 0,从而整个图像变成黑色。 -
invert(1) :
invert滤镜用于反转图像的颜色。invert(1)会将图像的颜色完全反转。例如,黑色会变成白色,蓝色会变成黄色,等等。
当这两个滤镜效果结合使用时,首先将图像的亮度设为 0(使其变成全黑),然后将颜色反转(将黑色变成白色)。最终的效果就是图像变成了纯白色。 打完收工!