likes
comments
collection

老板问我怎么让网站变灰!

作者站长头像
站长
· 阅读数 21

今天全网都变灰了🕯️,原因大家都知道。

中午吃饭老板问,你们是有啥开关吗,一下子能把app、网页啥的都变成灰色。

我笑了笑说:对啊,有开关,duang的一下就都变灰色了。

饭后赶紧看看是怎么duang的,给我们项目也都加上😭

先看看别人是怎么做的。

老板问我怎么让网站变灰!

某乎:

老板问我怎么让网站变灰!

小破站:

老板问我怎么让网站变灰!

看来就是你了:filter

赶紧去MDN瞅瞅是啥,

CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG 滤镜,通过一个 URL 链接到 SVG 滤镜元素(SVG filter element)。

下图中的blur()相信很多小伙伴都用过,将高斯模糊应用于输入图像,数值越大,越模糊。

老板问我怎么让网站变灰!

grayscale()的作用是将图像转为灰度图,对图片进行灰度转换,是filter-function 的子属性。

老板问我怎么让网站变灰!

参数是转化值的大小,可以是数字或者百分号,当值为 100% 时,灰度最大。0% 时与原图没有区别。0% 到 100% 之间的值会使灰度线性变化。参数为空时使用值为1。

多数平台参数都是0.95,跟别人设置一样准没错。

再看看filter还有哪些其他用法,注释我都加上了。

/* 获取指向 SVG 滤镜的 URI,该SVG filter可以嵌入到外部 XML 文件中。 */
filter: url("filters.svg#filter-id");

/* blur() 函数将高斯模糊应用于输入图像。 */
filter: blur(5px);

/* brightness() 函数将线性乘法器应用于输入图像,使其看起来或多或少地变得明亮。 */
filter: brightness(0.4);

/* contrast() 函数可调整输入图像的对比度。值是 0% 的话,图像会全黑。值是 100%,图像不变。 */
filter: contrast(200%);

/* drop-shadow() 函数对输入图像应用阴影效果。阴影可以设置模糊度的,以特定颜色画出的遮罩图的偏移版本,最终合成在图像下面。 */
filter: drop-shadow(16px 16px 20px blue);

/* grayscale() 函数将改变输入图像灰度。 */
filter: grayscale(50%);

/* hue-rotate() 函数在输入图像上应用色相旋转。 */
filter: hue-rotate(90deg);

/* invert() 函数反转输入图像。 */
filter: invert(75%);

/* 透明度 */
filter: opacity(25%);

/* saturate() 函数转换图像饱和度。 */
filter: saturate(30%);

/* sepia() 函数将图像转换为深褐色。 */
filter: sepia(60%);

就到这了,快给你的项目也加上吧🕯️🕯️🕯️