Muy a menudo, los diseñadores web encuentran la necesidad de darle sabor a sus sitios web jugando con la opacidad de CSS para fondos, textos e imágenes para crear efectos de estilo moderno y tenue. La opacidad también se utiliza ampliamente para crear un efecto de sombra sutil en el texto y los cuadros para hacer que una página web sea más atractiva para los usuarios. Esto se puede lograr usando la propiedad de opacidad CSS o usando el color RGBA, cada forma tiene sus propios méritos y defectos. Exploraremos algunos de sus usos prácticos más populares y la solución de compatibilidad entre navegadores para que funcionen en navegadores heredados como IE8 y versiones anteriores que ofrecen compatibilidad parcial o nula para navegadores.

Propiedad de opacidad CSS

La propiedad de opacidad de CSS se utiliza para establecer el valor de opacidad de un elemento. Define el nivel de transparencia mediante el uso de un número en el rango de 0 a 1, donde 1 corresponde a 100% opaco (o 0% transparente) y 0 corresponde a 0% opaco (o 100% transparente). Sin embargo, la propiedad de opacidad de CSS agregará el nivel de transparencia especificado a todo el elemento, incluidos todos sus elementos secundarios. Por ejemplo, si la propiedad de opacidad está definida para un elemento div, entonces todos los elementos dentro del div, que podrían ser texto, imagen u otros divs, también obtendrán la misma opacidad del div principal, aunque la opacidad no se herede explícitamente.

Antes de profundizar en este artículo, puede echar un vistazo al código de muestra que utilicé para representar la opacidad de CSS para el fondo en uno de nuestros experimentos de LambdaTest, aquí puede visualizar la salida con respecto a la diferencia en el valor de opacidad de CSS.

Sintaxis para usar CSS Opacity

opacidad: número | inicial | heredar;

  • Número: especifica el valor del canal alfa, el nivel de opacidad / transparencia. Varía de 0 (opacidad cero) a 1 (opacidad total)
  • Inicial: establece el valor predeterminado que es 1 - opacidad total
  • Heredar: heredar el valor del elemento principal

Código de muestra para representar un problema de compatibilidad entre navegadores en la opacidad de CSS para el color de fondo

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            text-align: center;
        }
        div {
            width: 50%;
            margin: 0 auto;
            background-color: #f1c40f;
            padding: 10px;
        }
        .opacity25 {
            opacity: 0.25;
        }
        .opacity50 {
            opacity: 0.5;
        }
        .opacity75 {
            opacity: 0.75;
        }
    </style>
</head>
<body>
    <h1>CSS OPACITY PROPERTY</h1>
    <div class="opacity25">
        <p>opacity 25%</p>
    </div>
    <div class="opacity50">
        <p>opacity 50%</p>
    </div>
    <div class="opacity75">
        <p>opacity 75%</p>
    </div>
    <div>
        <p>opacity 100%</p>
    </div>
</body>
</html>
Opacidad CSS

Nota: Si el número de opacidad de CSS se establece en un valor que está fuera del rango definido de 0 a 1, sigue siendo una sintaxis válida. El valor se redondea al punto límite más cercano. Por ejemplo, si la opacidad de CSS se establece en -0,5, se redondeará a 0. De manera similar, si la opacidad de CSS se establece en 1,25, se redondeará a 1.

1
2
3
4
5
6
7
8
<style>
.opacity-25{
 opacity: -0.25;
 }
.opacity125{
 opacity: 1.25;
 }
</style>
Opacidad CSS

Compatibilidad del navegador con la propiedad de opacidad CSS

Opacidad CSS

CSS3 proporciona una regla de estilo corta de una sola línea para agregar opacidad CSS para el color de fondo, que es compatible con todos los navegadores modernos. Sin embargo, antes debido a la compatibilidad entre navegadores y problemas de compatibilidad de funciones, hacer que la opacidad de CSS funcionara era bastante engorroso y requería extensas reglas específicas del navegador y alternativas que se muestran a continuación.

Opacidad CSS

Para acceder a mi página web en navegadores heredados, realicé pruebas de compatibilidad de navegadores con LambdaTest para asegurarme de que mi código se procese según lo previsto. LambdaTest es una herramienta de prueba entre navegadores que ofrece más de 2000 navegadores reales y versiones de navegadores que se ejecutan en numerosos sistemas operativos. Para este experimento de opacidad CSS para el color de fondo, utilicé la función interactiva en vivo de LambdaTest llamada Real Time Testing. Las pruebas en tiempo real lo ayudan a interactuar con su aplicación web en miles de navegadores y versiones de navegadores mediante la ejecución de una máquina virtual, alojada en servidores de nube LambdaTest.

También utilicé Lambda Tunnel, que me permitió probar mis páginas web alojadas localmente en la plataforma LambdaTest estableciendo una conexión SSH (Secure Shell).

Solución compatible con varios navegadores para opacidad CSS

Si observa el código a continuación, obtendrá una idea de cómo se utilizó la compatibilidad entre navegadores para CSS Opacity en días anteriores.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
div{
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  
 /* IE 5, IE6 and IE7 */
filter: alpha(opacity=50);
  
/* Netscape */
-moz-opacity: 0.5;
  
 /* Safari 1.x Pre webkit */
-khtml-opacity: 0.5;
  
/* Modern browsers */
opacity: 0.5;
}

Pero es bastante evidente que esta no es una solución práctica para el uso moderno. Hoy en día, existe un pequeño truco moderno para hacer que la opacidad de CSS funcione para todos los navegadores, incluidas las versiones heredadas de Internet Explorer: IE6-IE8.

1
2
3
4
5
div {
  opacity: 1;
  filter: alpha(opacity=100); /* IE8 and lower */
  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
}
Opacidad CSS

El código mencionado anteriormente no funcionará en IE, especialmente en IE8 si no se especifica 'zoom: 1'. IE no aplica varias reglas de estilo CSS a elementos que no tienen diseño. Se activará 'zoom: 1' o 'width: 100%' - "tiene diseño" para el elemento y habilitará la opacidad CSS para el color de fondo o las imágenes que se aplicarán.

Polyfill de opacidad para Internet Explorer (IE6 - IE8)

La solución final en nuestro carcaj para solucionar el problema de compatibilidad entre navegadores con la opacidad de CSS para el fondo y las imágenes, es un pequeño polyfill que agrega soporte a las versiones anteriores de IE, IE6, IE7 e IE8. El uso de este polyfill elimina la necesidad de preocuparse por los prefijos o fallos de los proveedores en lo que respecta a los navegadores heredados de IE. Sin embargo, tenga en cuenta que este polyfill no funcionará para las reglas de estilo CSS en línea.

USO:
use la declaración condicional de IE para cargar el archivo polyfill JS en Internet Explorer IE8, IE7 e IE6.

1
<!--[if lte IE 8]> <script src="jquery.ie-opacity-polyfill.js"></script>  <![endif]-->

Esto no será interpretado por ningún navegador moderno y simplemente se descartará como comentario. Si desea obtener más información sobre las declaraciones condicionales de IE y las consultas de características de CSS, consulte mi artículo aquí .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html>
  
<head>
    <meta charset="utf-8">
    <title>CSS Opacity Polyfill for IE</title>
    <!--[if lte IE 8]><script src="jquery.ie-opacity-polyfill.js"></script><![endif]-->
    <style type="text/css">
        .square {
            float: left;
            width: 90px;
            height: 90px;
            padding: 5px;
            margin: 25px;
            background: #000;
            color: #fff;
        }
        .opacity75 {
            opacity: .75;
        }
        .opacity50 {
            opacity: .5;
        }
        .opacity25 {
            opacity: .25;
        }
    </style>
</head>
<body>
    <div class="square">Opacity: 100%</div>
    <div class="square opacity75">Opacity: 75%</div>
    <div class="square opacity50">Opacity: 50%</div>
    <div class="square opacity25">Opacity: 25%</div>
</body>
</html>

CSS ofrece otra alternativa a la opacidad de CSS para lograr un tipo similar de opacidad o efecto de transparencia mediante el uso del color RGBA. Esto es bastante popular para crear fondos superpuestos, fondos degradados, texto y sombra de cuadro, texto degradado, etc.

Color RGBA

Un problema fundamental con la propiedad CSS Opacity es que, si se especifica para un elemento principal, también afecta a todos los elementos secundarios. Si configura el fondo de un elemento div en transparente, todos los elementos secundarios (como texto e imágenes) del div principal también se configurarán como transparentes. Aquí es donde el color RGBA viene a nuestro rescate. El valor de color RGBA es similar a RGB pero con un canal alfa que especifica la opacidad o, a la inversa, el valor de transparencia de un elemento, pero deja intactos a sus hijos.

Sintaxis del uso de RGBA para opacidad

rgba (R, B, G, canal alfa)

  • R / B / G: Especifica el valor o la intensidad de los colores rojo, azul y verde respectivamente, ya sea por un valor entero que va de 0 a 255 o un valor de% que va de 0 a 100%.
  • Canal alfa: especifique el valor de opacidad como un rango entre 0 y 1. 0 representa 0% de opacidad (o 100% de transparencia) y 1 representa 100% de opacidad (o 0% de transparencia).

Código de muestra para representar el problema de compatibilidad entre navegadores en la opacidad RGBA para el color de fondo

Puede consultar nuestro Experimento LambdaTest sobre la propiedad de color de fondo de opacidad RGBA . A continuación se muestra el ejemplo de código utilizado para el experimento de compatibilidad entre navegadores en RGBA Opacity.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            text-align: center;
        }
        div {
            width: 50%;
            margin: 0 auto;
            padding: 10px;
        }
        .opacity0{
            background: rgba(46, 204, 113,0);
        }
        .opacity25{
            background: rgba(46, 204, 113,0.25);
        }
        .opacity50{
            background: rgba(46, 204, 113,0.5);
        }
        .opacity75{
            background: rgba(46, 204, 113,0.75);
        }
        .opacity100{
            background: rgba(46, 204, 113,1.0);
        }
         
    </style>
</head>
<body>
    <h1>RGBA COLOR</h1>
    <div class="opacity0">
        <p>opacity 0%</p>
    </div>
    <div class="opacity25">
        <p>opacity 25%</p>
    </div>
    <div class="opacity50">
        <p>opacity 50%</p>
    </div>
    <div class="opacity75">
        <p>opacity 75%</p>
    </div>
    <div class="opacity100">
        <p>opacity 75%</p>
    </div>
</body>
</html>
Opacidad CSS

Compatibilidad del navegador con el tipo de color RGBA

Opacidad CSS

Aunque el color RGBA goza de un excelente soporte en todos los principales navegadores y es en gran medida compatible con todos los navegadores. Sin embargo, las excepciones notables son IE6 - IE8 que no admiten esta función. Una solución es utilizar un color sólido alternativo (100% de opacidad) sin ningún valor alfa, es decir, sin ningún valor de opacidad / transparencia. Los navegadores que no comprenden el valor RGBA mostrarán el color de respaldo. Sin embargo, exploraremos formas de hacer que RGBA sea compatible con varios navegadores y también funcione en las versiones IE6-IE8.

Opacidad CSS

Solución compatible con navegadores cruzados para usar RGBA para opacidad

Microsoft Internet Explorer (IE6-IE8) tenía sus propias propiedades de gradiente y filtro, que son ligeramente diferentes a RGBA. Más bien usa un valor HEX de 8 caracteres llamado 'ARGB' (RGB alfa) para definir colores con un valor de transparencia. A diferencia del RGBA tradicional que tiene 4 caracteres de longitud, los valores R, G, B varían de 0 a 255 y el valor del canal alfa varía de 0 a 1, #ARGB tiene un formato hexadecimal con los primeros 2 - #AARRGGBB. Los primeros 2 caracteres especifican el valor alfa y controlan la opacidad (00-FF), mientras que los últimos 6 caracteres especifican la intensidad del color rojo, azul y verde respectivamente.

Aquí hay una tabla que muestra el valor alfa en% y su valor alfa correspondiente en formato #ARGB - Si tiene un valor RGBA - rgba (F, 0,0,0.5), entonces el valor correspondiente en formato #ARGB será # 80FF0000 donde primero 2 los caracteres '80' representan 0.5 o 50% de opacidad.

100%

FF

95%

F2

90%

E6

85%

D9

80%

CC

75%

BF

70%

B3

sesenta y cinco%

A6

60%

99

55%

8C

50%

80

45%

73%

40%

66

35%

59

30%

4D

25%

40

20%

33

15%

26

10%

1A

5%

0D

0%

00

Agregue los siguientes fragmentos de código a su código para habilitar la compatibilidad con RGBA en IE6, IE7 e IE8

  • Para IE6-IE7
1
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#6523BE38', EndColorStr='#6523BE38');
  • Para IE8
1
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#6523BE38', EndColorStr='#6523BE38')";
  • 'hasLayout' para IE
1
Add zoom:1; to trigger ‘hasLayout’

Ahora, después de combinar todas las alternativas, nuestro código final se convierte en:

01
02
03
04
05
06
07
08
09
10
11
12
13
14