Hacer el sitio web gris

Sábado 4 de abril de 2020, Festival Ching Ming | Día del Luto.

Nuestro país ha experimentado momentos muy dolorosos, muchos héroes cayeron en el camino para rescatar a otros, y muchos mártires y héroes han defendido la seguridad y la muerte de las personas. Hoy, la bandera nacional se baja a la mitad y el silencio nacional durante tres minutos a las 10:00 hora de Beijing para rendir homenaje a los héroes. Al mismo tiempo, todas las actividades de entretenimiento público se detendrán hoy, incluida la transmisión en vivo, programas de variedades, películas, juegos, etc.

También estoy aquí para expresar mi más sentido pésame a los mártires y compatriotas fallecidos que murieron en la lucha de la nación contra la epidemia de neumonía coronaria nueva, y para rendir homenaje a todo el trabajo y al personal médico en la primera línea de la guerra. Delante de cada uno de nosotros está el muro de los héroes.

Sitio web atenuado

Hoy puede ver que muchos sitios web, incluida la página de inicio y el contenido, se han vuelto grises, como Baidu, B station, iQiyi, CSDN, etc.

CSDN

IQiyi

Baidu

Puede ver que el contenido de todo el sitio se ha vuelto gris, incluidos los botones, las imágenes, etc. En este momento nos preguntamos cómo se hace esto.

Algunas personas piensan que todo el contenido ha sido reemplazado por un estilo CSS, las imágenes han sido reemplazadas por gris y los botones y otros estilos han sido reemplazados por estilos grises. Pero si lo piensa, el costo es demasiado alto, y si un control olvida agregar un estilo gris, ¿no sería demasiado molesto?

De hecho, la solución es simple y solo se necesitan unas pocas líneas de código para hacerlo.

Lograr

Elija un sitio web, como la estación B, y abra las herramientas de desarrollo del navegador.

Al examinar el código fuente de la página web, podemos encontrar que hay una clase sospechosa en esta parte de html, llamada grey, y grey es grey en chino.

Efecto canoso

Su contenido CSS es:

html.gray {    -webkit-filter: grayscale(.95);}

Si lo cancelamos, podemos encontrar que se puede restaurar el color del sitio web.

Restaurar efecto

Efectivamente, este estilo está funcionando y es un efecto global, ya que está actuando en el nodo html.

También eche un vistazo a CSDN, también se usa este estilo CSS, su contenido es:

html {    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: grayscale(100%);    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

Esta implementación parece ser más compatible.

Por lo tanto, podemos determinar que un estilo CSS global puede convertir todo el sitio web en un efecto gris.

Análisis

Así que aquí veremos más de cerca qué tipo de estilo CSS es este.

Este nombre de estilo se llama filtro, busque la introducción oficial de MDN, el enlace es: https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter.

La introducción oficial es la siguiente:

filter Las propiedades CSS aplican efectos gráficos como desenfoque o cambio de color a los elementos. Los filtros se usan generalmente para ajustar la representación de imágenes, fondos y bordes.

El estándar CSS contiene algunas funciones que tienen efectos predefinidos. También puede hacer referencia a un filtro SVG y vincular al elemento de filtro SVG [elemento de filtro SVG [1]) a través de una URL.

De hecho, significa un filtro.

El oficial tiene una Demo, puede ver el efecto, como se muestra.

Manifestación

Por ejemplo, la imagen, el color, el desenfoque, el contraste, etc. se cambian a través del estilo de filtro.

Todos sus ejemplos de uso son los siguientes:

/* URL to SVG filter */filter: url("filters.svg#filter-id");
/* <filter-function> values */filter: blur(5px);filter: brightness(0.4);filter: contrast(200%);filter: drop-shadow(16px 16px 20px blue);filter: grayscale(50%);filter: hue-rotate(90deg);filter: invert(75%);filter: opacity(25%);filter: saturate(30%);filter: sepia(60%);
/* Multiple filters */filter: contrast(175%) brightness(3%);
/* Global values */filter: inherit;filter: initial;filter: unset;

Para diversas presentaciones de uso, puede consultar la documentación oficial: https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

Por ejemplo, si podemos usar el desenfoque para establecer el desenfoque gaussiano, el uso es el siguiente:

filter: blur(radius)

Establezca Gaussian Blur en la imagen. El valor del radio establece la desviación estándar de la función gaussiana, o cuántos píxeles se fusionan en la pantalla, por lo que cuanto mayor sea el valor, más borrosa; si no hay un valor establecido, el valor predeterminado es 0; este parámetro puede establecer el valor absoluto de píxeles, pero no es aceptable El valor porcentual.

Este efecto se puede lograr:

Efecto

Hablemos de la imagen gris en este momento. De hecho, la escala de grises se establece aquí, y su uso es el siguiente:

filter: grayscale(percent)

Convierta la imagen en una imagen en escala de grises. El valor define la escala de la conversión. El valor porcentual es 100%, se convierte completamente a imagen en escala de grises, y el valor es 0%, la imagen no tiene cambios. Los valores entre 0% y 100% son multiplicadores lineales del efecto. Si no se establece, el valor predeterminado es 0. Además de los porcentajes de aprobación, también se pueden pasar números de coma flotante, el efecto es el mismo.

Tales como:

filter: grayscale(1)filter: grayscale(100%)

Todos los nodos se pueden convertir al modo de escala de grises al 100%.

Entonces, todo está claro aquí, si queremos convertir todo el sitio en gris y luego considerar la escritura compatible de cada navegador, puede consultar la escritura de CSDN:

.gray {    -webkit-filter: grayscale(100%);    -moz-filter: grayscale(100%);    -ms-filter: grayscale(100%);    -o-filter: grayscale(100%);    filter: grayscale(100%);    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

De esta forma, el nodo que desea estar en gris solo necesita agregar la clase gris, por ejemplo, si se agrega al nodo html, toda la estación puede estar en gris.

Finalmente, eche un vistazo a la compatibilidad del navegador con el estilo de filtro, como se muestra en la figura:

Compatibilidad

Aquí vemos que, además de IE, otros navegadores en PC y teléfonos móviles son compatibles. PC y Android en Firefox también admiten por separado las imágenes SVG para un uso seguro.

Resumen

Este artículo presenta brevemente la implementación del sitio web canoso observado hoy, y también aprende un uso más detallado del filtro, espero que ayude.