css3 - semi - ¿Cuál es la diferencia entre "opacidad" y "filtro: opacidad()"

opacity css background

Question

La mayoría de nosotros conocemos la regla de CSS de opacity simple, pero recientemente me topé con un filter que puede tener opacity(amount) como valor, entre otras cosas. Pero, ¿cuál es exactamente la diferencia entre los dos?

Answer 1

filter: opacity () es similar a la propiedad de opacidad más establecida; la diferencia es que con el filtro: opacidad () , algunos navegadores proporcionan aceleración de hardware para un mejor rendimiento. No se permiten valores negativos.

filtro: opacidad () aplica transparencia. Un valor del 0% es completamente transparente. Un valor del 100% deja la entrada sin cambios. Los valores entre 0% y 100% son multiplicadores lineales en el efecto. Esto es equivalente a multiplicar las muestras de la imagen de entrada por la cantidad. Si falta el parámetro "cantidad", se utiliza un valor del 100%.

Fuente: https://css-tricks.com/almanac/properties/f/filter/

/*
* -----------
* filter: opacity([ <number> or <percentage> ])
* -----------
*/

.filter-opacity {
  filter: opacity(0.3);
  height: 5rem;
  width: 5rem;
  background-color: mediumvioletred;
}

/*
* -----------
* standard opacity
* -----------
*/

.just-opacity {
  opacity: 0.3;
  height: 5rem;
  width: 5rem;
  background-color: lawngreen;
}

<div class="filter-opacity">
  filter-opacity
</div>

<div class="just-opacity">
  just-opacity
</div>

Answer 2

He encontrado alguna diferencia entre ambos, especialmente en el navegador Chrome. Si configuramos la propiedad de opacity CSS en una etiqueta de iframe , entonces no podremos hacer clic en ningún enlace dentro de este marco (supongo, es una protección contra el ataque de clickjacking ) mientras que filter: opacity(0) nos permite hacer clic en cualquier enlace . No lo sé, tal vez sea una omisión por parte de los desarrolladores de Chrome.

Answer 3

filter en CSS tuvo algunas ejecuciones diferentes, concretamente para FireFox y MSIE.

En MSIE 5.5 en 7, el filter , también conocido como filter , en realidad utiliza el filtro DX de MSIE ( ya no es compatible ). Sin embargo, para ser más compatible con CSS2.1, en IE8 MS introdujo -ms-filter para reemplazar el filter . La sintaxis es diferente en que el valor de -ms-filter debe estar entre comillas . Finalmente, IE9 dejó de lado este método y, a partir de IE10, ya no se utiliza.

Otra nota interesante aquí es que si desea una compatibilidad total con el IE anterior, debe asegurarse de que el uso del filter y del filter -ms-filter sea ​​muy específico. Por ejemplo, lo siguiente no funciona en IE8 ejecutando el modo compatible con IE7:

element {
    filter: alpha(opacity=50);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

-ms-filter debe aparecer antes del filter para -ms-filter compatibilidad con IE anterior. Al igual que:

element {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

FireFox hizo uso del filter como un experimento que salió mal. Creo que la idea original era burlarse de lo que hacía IE al usar el motor Direct X. Incluso había una versión específica para el navegador, como la había para la mayoría de los navegadores a la vez. Eventualmente, HTML5 / CSS3 anunció el uso del espacio de nombres del filter y ahora tiene un nuevo propósito.

A partir de CSS3, ¡el filter ahora tiene un significado completamente nuevo! Los documentos de Firefox permanecen abiertos como si planearan expandirse en esto, aunque todavía no lo he visto (¡sin embargo, si JS no es de su agrado, ahora se estrellan JS). ¡Webkit (que probablemente se convertirá en estándar en la próxima actualización a CSS3) ha comenzado a implementar el filter hasta el punto en que casi puede " photoshop " imágenes para su sitio!

Dado que el filtro está cambiando tanto, la opacity sería el método preferido de uso, sin embargo, como puede ver, para ser completamente compatible con todos los navegadores significa ser muy completo.

Alternativas específicas del navegador:

• -webkit-filter: filtro (valor);
• -moz-filter: filtro (valor);
• -o-filtro: filtro (valor);
• -ms-filter: "progid: DXCLASS.Object.Attr (value)";

Ver también:

• ¿Qué es compatible con la opacity ?
• ¿Qué es compatible con el filter más nuevo?
  • Ten en cuenta que no es lo mismo que el filtro de IE anterior