El atributo de filtro de front-end implementa la función de atenuación de página + aprende el atributo de filtro
Todos los sitios son grises:
El atributo de filtro en CSS3 se usa para el control, simplemente agréguelo al html más externo:
// 适应各种浏览器做的兼容
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: Con el prefijo webkit, puede tener efecto en navegadores con kernel webkit;
-moz-filter: Con prefijo moz, puede tener efecto en el navegador Firefox;
-ms-filter: Con prefijo ms, puede tener efecto en Navegador IE entra en vigor;
-o-filter: el prefijo o puede entrar en vigor en el navegador Opera;
las últimas tres líneas son para navegadores compatibles con el núcleo IE.
Además del filtro, ¿hay alguna otra forma de atenuar los sitios web? Consulte: https://www.cnblogs.com/coco1s/p/16943642.html
Propiedad de filtro CSS3
文档：https://www.runoob.com/cssref/css3-pr-filter.html
1. Gramática:
filtro: ninguno | desenfoque() | brillo() | contraste() | sombra paralela () | escala de grises() | rotación de tono() | invertir() | opacidad() | saturar() | sepia() | URL();
2.none: valor predeterminado, que indica que no hay efecto
3.blur: establece el desenfoque gaussiano en la imagen, la unidad es px
img {
-webkit-filter: blur(10px); /* Chrome, Safari, Opera */
filter: blur(10px);
}
Si no se establece ningún valor, el valor predeterminado es 0:
4.Brillo: Haga que se vea más brillante o más oscuro, la unidad es % (el valor es 100%, la imagen es normal; el valor es 0%, la imagen será completamente negra; menos del 100%, cuanto más pequeña, más oscura imagen; mayor que 100%, cuanto más oscura es la imagen (Cuanto más grande, más brillante)
img {
-webkit-filter: brightness(150%); /* Chrome, Safari, Opera */
filter: brightness(150%);
}
img {
-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
filter: brightness(50%);
}
5.contraste: ajusta el contraste de la imagen, la unidad es % (el valor es 100%, la imagen es normal; el valor es 0%, la imagen será completamente negra; si es mayor que 100%, más grande es, mayor es la distorsión)
img {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}
img {
-webkit-filter: contrast(20%); /* Chrome, Safari, Opera */
filter: contrast(20%);
}
6.sombra paralela (color de desenfoque con desplazamiento x y desplazamiento): logra el efecto de filtro de sombra
(1) desplazamiento x: define la distancia de desplazamiento de la sombra horizontal. Se pueden utilizar valores negativos. Dado que CSS3 utiliza el sistema de coordenadas W3C, cuando el valor de desplazamiento x es positivo, se desplaza hacia la derecha; cuando el valor es negativo, se desplaza hacia la izquierda.
(2) Desplazamiento y: define la distancia de desplazamiento de la sombra vertical. Se pueden utilizar valores negativos. Dado que CSS3 utiliza el sistema de coordenadas W3C, cuando el valor de desplazamiento y es positivo, se desplaza hacia abajo; cuando el valor es negativo, se desplaza hacia arriba.
(3) desenfoque: define el radio de desenfoque de la sombra, que solo puede ser valores positivos.
(4) color: define el color de la sombra.
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
7.escala de grises: convierte la imagen a una imagen en escala de grises, la unidad es% (el valor es 100%, completamente convertida a una imagen en escala de grises; el valor es 0%, la imagen no ha cambiado)
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
8.hue-rotate: aplica rotación de tono a la imagen, la unidad es grados (el valor es 0%, la imagen no ha cambiado; 360 grados es un círculo)
img {
-webkit-filter: hue-rotate(100deg); /* Chrome, Safari, Opera */
filter: hue-rotate(100deg);
}
9.invertir: Invierte la imagen de entrada, la unidad es % (el valor es 100% de inversión completa. Si el valor es 0%, la imagen no tiene cambios)
img {
-webkit-filter: invert(80%); /* Chrome, Safari, Opera */
filter: invert(80%);
}
10.opacidad: convierte la saturación de la imagen, la unidad es% (un valor de 0% significa que está completamente insaturado, un valor de 100% significa que no hay cambios en la imagen, mayor que 100%, la saturación es mayor )
img {
-webkit-filter: opacity(0%); /* Chrome, Safari, Opera */
filter: opacity(0%);
}
11.saturar: grado de transparencia, la unidad es % (un valor de 0% significa que es completamente transparente, un valor de 100% significa que no hay cambios en la imagen)
img {
-webkit-filter: saturate(500%); /* Chrome, Safari, Opera */
filter: saturate(500%);
}
12.sepia: Convierte la imagen a marrón oscuro, la unidad es % (el valor es 100%, es completamente marrón oscuro, el valor es 0%, la imagen no tiene cambios)
img {
-webkit-filter: saturate(500%); /* Chrome, Safari, Opera */
filter: saturate(500%);
}
13.url: la función URL acepta un archivo XML, que establece un filtro SVG y puede contener un punto de anclaje para especificar un elemento de filtro específico.
img {
filter: url(svg-url#element-id)
}