CSS: propiedad de opacidad

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedad de opacidad

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada Opacidad Con sintaxis y ejemplos.

describir

La propiedad de opacidad de CSS define la transparencia de un elemento.

sintaxis

La sintaxis de la propiedad CSS de opacidad es:

opacity: value;

parámetro o parámetro

valor

El nivel de transparencia del elemento. Puede ser uno de los siguientes:

valor describir
número Un valor entre 1,0 y 0,0.
div {opacidad: 0.5;}
heredar Indica que el elemento heredará la opacidad de su elemento principal
div {opacidad: heredar;}

notas

  • Si la propiedad de opacidad se representa como un número, puede estar entre 1,0 y 0,0.
    • Un valor de 1,0 significa que el elemento es completamente opaco (no se puede ver detrás del elemento).
    • Un valor de 0,0 indica que el elemento es totalmente transparente (es decir, invisible).

Compatibilidad del navegador

La propiedad de opacidad de CSS tiene soporte básico para los siguientes navegadores:

  • cromo 1+
  • androide 1+
  • Firefox 1+ (Geco 1.7+)
  • Firefox móvil 1.0+ (Gecko 1.7+)
  • Internet Explorer 9+ (IE 9+)
  • IE Móvil 9+
  • Ópera 9+
  • Ópera móvil 9+
  • Safari 1.2 (WebKit)
  • Safari Móvil 3.2

ejemplo

Discutiremos la propiedad de opacidad a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.

opaco

Veamos un ejemplo en el que establecemos la opacidad en 1, lo que hace que el elemento sea opaco.

CSS se ve así:

div { border: 2px solid red; background: lightyellow; padding: 10px; }

p { border: 3px solid blue; background: lightblue; opacity: 1; }

HTML se ve así:

<div>
  <p>This is the first paragraph written by prograrmaplus.com.</p>
  <p>This is the second paragraph written by prograrmaplus.com.</p>
</div>

El resultado se verá así:

En este ejemplo de opacidad CSS, vamos a

La opacidad de la etiqueta se establece en 1, lo que significa

Los elementos son completamente sólidos sin transparencia.

translúcido

Ahora, tomemos el mismo ejemplo, ¿verdad?

La etiqueta aplica una cierta cantidad de transparencia para que sea semitransparente.

CSS se ve así:

div { border: 2px solid red; background: lightyellow; padding: 10px; }

p { border: 3px solid blue; background: lightblue; opacity: 0.5; }

HTML se ve así:

<div>
  <p>This is the first paragraph written by prograrmaplus.com.</p>
  <p>This is the second paragraph written by prograrmaplus.com.</p>
</div>

El resultado se verá así:

En este ejemplo de opacidad CSS, vamos a

El atributo de opacidad en la etiqueta se establece en 0,5, lo que hace

Los elementos son translúcidos.Esto conducirá a

Se muestra la parte de fondo detrás de la etiqueta.

Como puedes ver,

El borde azul de la etiqueta y el fondo azul claro comienzan a aparecer verdes, mientras

El fondo amarillo de la etiqueta comienza a verse.

completamente transparente

Finalmente, tomemos un ejemplo y hagamos que nuestro elemento sea completamente transparente o invisible.

CSS se ve así:

div { border: 2px solid red; background: lightyellow; padding: 10px; }

p { border: 3px solid blue; background: lightblue; opacity: 0; }

HTML se ve así:

<div>
  <p>This is the first paragraph written by prograrmaplus.com.</p>
  <p>This is the second paragraph written by prograrmaplus.com.</p>
</div>

El resultado se verá así:

En este ejemplo de opacidad CSS, ahora

La propiedad de opacidad de la etiqueta se establece en 0, lo que hace

El elemento es completamente transparente o invisible.

(Visited 6 times, 1 visits today)