A moment of silence

First, a moment of silence on memorial Day…

Page gray effect

Baidu Encyclopedia will turn the search information page gray when someone dies. When I visited SITE B today, I found that all site B also turned gray on the day of public memorial day. All sites mourned for the deceased in an Internet style.

Mourn at the same time to tell you by the way the realization of the whole site gray.

The filter (filter)

Usage:

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

Description:

  • None: the default value.
  • Blur (): Sets gaussian blur to the image.
  • Brightness (): Add a linear multiplication to the picture to make it look brighter or darker.
  • Contrast (): Adjust the contrast of an image.
  • Drop-shadow (): Sets a shadow effect on the image
  • Grayscale (): Converts the image to grayscale.
  • Hue -rotate(): Applies hue rotation to the image.
  • Invert (): Invert the input image.
  • Opacity (): Transforms the opacity of an image.
  • Saturate (): Converts image saturation.
  • Sepia (): Converts the image to dark brown.
  • Url (): The URL function takes an XML file that sets an SVG filter and can contain an anchor to specify a specific filter element.

compatibility

Gray site implementation

usegrayscaleTo achieve the effect.

Grayscale (100%) can be set; To convert the image to grayscale image.

html {
    filter: grayscale(100%).-webkit-filter: grayscale(100%).-moz-filter: grayscale(100%).-ms-filter: grayscale(100%).-o-filter: grayscale(100%);
}
Copy the code

Comparison of Display effects

Normal page

Gray page

The picture

You can also use a separate gray effect on the image

img {
    filter: grayscale(100%).-webkit-filter: grayscale(100%).-moz-filter: grayscale(100%).-ms-filter: grayscale(100%).-o-filter: grayscale(100%);
}
Copy the code

The last

May the deceased rest in peace