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
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.