如何让网站变灰?

1/5/2022 CSS

# filter属性

  • CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
  • grayscale()的作用是将图像转为灰度图,对图片进行灰度转换,是filter-function 的子属性。
  • 多数平台参数都是0.95,跟别人设置一样准没错。
    /* 本文主角grayscale() 函数将改变输入图像灰度。 */
    filter: grayscale(0.95);

    /* 获取指向 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);

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

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

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

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

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