¿Cómo lograr resultados con una sola línea de código de la página está atenuado?

Hoy en día es 2020 4 de abril de Sábado, Festival Ching Ming.

Nuestro país ha pasado por un momento muy doloroso, una gran cantidad de héroes caídos en el camino de ayudar a los demás, también muchos mártires heroicos para defender la seguridad de las personas que murieron hoy baja a la mitad del país en el momento de Beijing 10:00 país tres minutos de silencio para rendir homenaje a los héroes. Hoy en día, mientras que todas las actividades de espectáculos públicos se detendrá, incluyendo en vivo, variedad, películas, juegos y más.

Estoy aquí para luchar contra la nueva epidemia de neumonía corona lucha nacional a la muerte de los mártires y de los compatriotas profundas condolencias expresadas, rinden homenaje a la epidemia de primera línea trabajadores de la salud para el trabajo y toda la guerra. Delante de cada uno de nosotros la paz, son héroes de la pared.

Sitio web atenuado

Hoy en día podemos ver muchos, muchos sitios, incluyendo la página principal y el contenido también se han convertido en un gris, como Baidu, la estación B, iQIYI, CSDN y así sucesivamente.

CSDN

iQIYI

Baidu

Podemos ver el contenido de toda la estación están atenuados, incluyendo botones, imágenes, y así sucesivamente. Esta vez nos preguntamos cómo se hace esto?

Algunas personas pueden pensar que todo el cambio en el contenido de un estilo CSS unificado, sino también a toda la imagen en un gris botones, uniformes y otros estilos también se sustituye el estilo gris. Pero cree que el costo es demasiado alto, pero se olvida de agregar un control en caso de que el estilo gris no sería demasiado brusco.

De hecho, la solución es muy simple y requiere sólo unas pocas líneas de código puede conseguir.

realización

Elegimos un sitio, tales como B soportarlo, abre las herramientas de desarrollador del navegador.

Opinión sobre el código fuente de la página, podemos encontrar en este lugar html de una clase más sospechoso, llamado los grises, grises china que es de color gris.

En gris efecto

CSS como su contenido:

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

Hemos establecido si fuera poco, se puede encontrar el color del sitio será capaz de restaurar de nuevo.

efecto reductor

Esto realmente es el estilo en el trabajo, pero el efecto general, ya que es en la parte superior del papel HTML en este nodo.

También echa un vistazo a CSDN, también se utiliza en el estilo CSS, que dice:

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 aplicación se verá mejor compatibilidad.

Por lo tanto, podemos determinar, todo el sitio será capaz de convertirse en un efecto de color gris global a través de estilos CSS.

análisis

Así que aquí venimos a aprender más acerca de si se trata de un tipo de estilos CSS.

El nombre del estilo se llama filtro, buscar en la descripción oficial del MDN, vincularlo a: https: //developer.mozilla.org/zh-CN/docs/Web/CSS/filter.

La descripción oficial dice lo siguiente:

filter propiedades CSS se desenfoque o efecto de cambio de color se aplica a otros elementos gráficos. Filtro se suele utilizar para ajustar la imagen renderizada, fondo y el borde.

estándar CSS contiene una serie de funciones predefinidas se han logrado efecto. También puede hacer referencia a un filtro SVG, a través de un enlace de URL para elementos de filtro SVG (SVG elemento de filtro [1]).

En realidad, es un medio de filtro.

un Oficial Demo, puede mirar efecto, como se muestra en la figura.

Subiendo ... volver a subir cancelado

Manifestación

Por ejemplo, aquí la imagen cambiando el filtro de estilos, colores, falta de definición, contraste y así sucesivamente.

Todos los ejemplos de sus usos 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;

Cada presentación uso se puede hacer referencia a la documentación oficial: https: //developer.mozilla.org/zh-CN/docs/Web/CSS/filter

Por ejemplo, aquí si podemos utilizar la configuración de desenfoque desenfoque gaussiano, el uso es el siguiente:

filter: blur(radius)

desenfoque gaussiano a los ajustes de imagen. valor de la función de Gauss se establece en una desviación estándar de radio, o el número de píxeles en la pantalla para fundir juntos, mayor es el valor de la fuzzy; si el valor no está establecido, el valor predeterminado es 0; este parámetro se puede ajustar a un valor absoluto de un píxel, pero no acepta valor de porcentaje.

Este efecto se puede lograr:

efecto

Volviendo a la imagen de color gris justo, aquí se pone realmente en escala de grises, que se utiliza de la siguiente manera:

filter: grayscale(percent)

Convierte la imagen a escala de grises. Valor define la relación de conversión. valor del porcentaje de 100% se convierte completamente a una imagen en escala de grises, el valor de imagen es 0% Sin cambios. Un valor entre 0% a 100%, el efecto del multiplicador lineal. Si no se establece el valor por defecto es 0. Otra adición al porcentaje de transmisión puede también pasa flotadores, el efecto es el mismo.

Tales como:

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

Todos los nodos pueden ser convertidos a escala de grises 100%.

Por lo que todo quedó claro aquí, si queremos llegar a ser la estación de gris, teniendo en cuenta que cada navegador es compatible con el texto, se puede referir a RDCC redacción:

.gris {

    -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);}

Por lo que desea nodos se apagaron sólo tendrá que añadir esta clase como un gris, tales como html nodos se pueden añadir a la estación que está en gris.

Por último, mira el filtro de compatibilidad del navegador cómo este estilo, como se muestra:

compatibilidad

Aquí vemos aquí, además de IE, la otra PC, móvil de soporte navegadores terminal, PC de Firefox, Android terminal de apoyo también se agrega por separado para las imágenes SVG, puede estar seguro de que el uso.

resumen

Esta breve introducción artículo acerca de la realización del sitio atenuado observada hoy en día, un estudio más detallado de la utilización del filtro, queremos ayudar.

 

Reproducido en: https://mp.weixin.qq.com/s/ea1clNkL59bBQQYGk6npbQ