The front-end filter attribute implements the page graying function + learn the filter attribute

All sites are gray:

The filter attribute in CSS3 is used for control. Just add it to the outermost html:

// 适应各种浏览器做的兼容
html {
    
    
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}

-webkit-filter: With webkit prefix, it can take effect in browsers with webkit kernel;
-moz-filter: With moz prefix, it can take effect in Firefox browser;
-ms-filter: With ms prefix, it can take effect in IE browser Take effect;
-o-filter: The o prefix can take effect in the Opera browser;
the last three lines are for browsers compatible with IE core.

Besides filter, is there any other way to gray out websites? Please refer to: https://www.cnblogs.com/coco1s/p/16943642.html

CSS3 filter property

文档：https://www.runoob.com/cssref/css3-pr-filter.html

1. Grammar:

2.none: Default value, indicating no effect

3.blur: Set Gaussian blur to the image, the unit is px

img {
    
    
    -webkit-filter: blur(10px); /* Chrome, Safari, Opera */
    filter: blur(10px);
}

Insert image description here
If no value is set, the default is 0:

4.Brightness: Make it look brighter or darker, the unit is % (the value is 100%, the image is normal; the value is 0%, the image will be completely black; if it is less than 100%, the smaller it is, the darker it is; if it is greater than 100%, the image will be darker) The bigger, the brighter)

img {
    
    
    -webkit-filter: brightness(150%); /* Chrome, Safari, Opera */
    filter: brightness(150%);
}

Insert image description here

img {
    
    
    -webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
    filter: brightness(50%);
}

Insert image description here

5.contrast: Adjust the contrast of the image, the unit is % (the value is 100%, the image is normal; the value is 0%, the image will be completely black; if it is greater than 100%, the larger it is, the greater the distortion)

img {
    
    
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}

Insert image description here

img {
    
    
    -webkit-filter: contrast(20%); /* Chrome, Safari, Opera */
    filter: contrast(20%);
}

Insert image description here

6.drop-shadow(x-offset y-offset blur color): achieve shadow filter effect

(1) x-offset: Defines the offset distance of the horizontal shadow. Negative values can be used. Since CSS3 uses the W3C coordinate system, when the x-offset value is positive, it is offset to the right; when the value is negative, it is offset to the left.
(2) y-offset: Defines the offset distance of the vertical shadow. Negative values can be used. Since CSS3 uses the W3C coordinate system, when the y-offset value is positive, it shifts downward; when the value is negative, it shifts upward.
(3) blur: defines the blur radius of the shadow, which can only be positive values.
(4) color: Define the color of the shadow.

img {
    
    
   -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}

Insert image description here

7.grayscale: Convert the image to a grayscale image, the unit is % (the value is 100%, completely converted to grayscale image; the value is 0%, the image has not changed)

img {
    
    
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

Insert image description here

8.hue-rotate: Apply hue rotation to the image, the unit is deg (the value is 0%, the image has not changed; 360deg is a circle)

img {
    
    
    -webkit-filter: hue-rotate(100deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(100deg);
}

Insert image description here

9.invert: Invert the input image, the unit is % (the value is 100% complete inversion. If the value is 0%, the image has no change)

img {
    
    
    -webkit-filter: invert(80%); /* Chrome, Safari, Opera */
    filter: invert(80%);
}

Insert image description here

10.opacity: Convert the saturation of the image, the unit is % (a value of 0% means it is completely unsaturated, a value of 100% means there is no change in the image, greater than 100%, the saturation is higher)

img {
    
    
    -webkit-filter: opacity(0%); /* Chrome, Safari, Opera */
    filter: opacity(0%);
}

11.saturate: degree of transparency, unit is % (a value of 0% means it is completely transparent, a value of 100% means there is no change in the image)

img {
    
    
    -webkit-filter: saturate(500%); /* Chrome, Safari, Opera */
    filter: saturate(500%);
}

Insert image description here

12.sepia: Convert the image to dark brown, the unit is % (the value is 100%, it is completely dark brown, the value is 0%, the image has no change)

img {
    
    
    -webkit-filter: saturate(500%); /* Chrome, Safari, Opera */
    filter: saturate(500%);
}

13.url: The URL function accepts an XML file, which sets an SVG filter and can contain an anchor point to specify a specific filter element.

img {
    
    
    filter: url(svg-url#element-id)
}