propiedad de opacidad en CSS

CSS | opacidad Propiedad : Aquí, vamos a aprender acerca de la propiedad opacidad con la sintaxis y ejemplos de CSS .

CSS | opacidad Propiedad

Con la creciente necesidad de hacer sitios web, la necesidad class labrar ellos también ha aumentado. Por lo tanto, el CSS se ha convertido en una parte indispensable de la creación de sitios web. Por lo tanto uno debe ser consciente de las propiedades que se utilice durante la creación de un sitio web.

Diversas propiedades se utilizan for peinado. Ya que hay muchas propiedades para el uso for, es for natural de cualquier principiante a confundirse sobre el cual la propiedad de usar y cuándo.

En este segmento, la discusión estará en una tal propiedad que se conoce como opacidad .

Antes de implementar propiedad opacidad de inmediato vamos a discutir primero esta propiedad fuera de contexto de la CSS.

propiedad opacidad

opacidad es el grado de transparencia de cualquier elemento vivo o no de estar . Si decimos que un determinado objeto es opaco entonces significa que el objeto tiene 0 la transparencia, lo que a su vez significa que nadie puede mirar a través de ese objeto.

Y si decimos que un determinado objeto es transparente entonces ese objeto tiene 0 opacidad.

El mismo significado de opacidad mantiene en el CSS también. ¡echemos un vistazo!

Definición: Como se mencionó anteriormente la opacidad es el grado de transparencia. En CSS la propiedad opacidad tiende a establecer la opacidad de un elemento.

grados de opacidad:

  • 1 significa que el objeto no es transparente en absoluto.
  • 0,5 significa que el objeto es semi-transparente.
  • 0 significa que el objeto es totalmente transparente.

Nota: El inconveniente de propiedad opacidad es que si establece sus elementos a ser transparente y luego todos los hijos de atributos también se vuelven transparentes. Si se quiere evitar esto y desea hacer sus textos legibles en el interior del elemento, entonces usted debe valores RGBA lugar.

El valor for de opacidad es 1.

CSS Sintaxis:

    Element{
opacity: number|initial|inherit;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
opacity: 0.55;
}
</style>
</head>
<body>
<div>This following div element's opacity is 0.55</div>
<div>The background colour is affected by the opacity level.</div>
</body>
</html>

salida

opacity property in CSS - 4

En el ejemplo anterior, el nivel de opacidad de 0,55 se aplica a la div elemento .

Valor
Descripción

número Esto especifica la opacidad de 0,0 (transparente) a 1,0 (opaco).
inicial Este conjuntos esta propiedad a su valor default.
hereda Ayuda a heredar esta propiedad de su elemento padre.

Conclusión:

Cuando se trata de usar una propiedad de opacidad debe ser muy considerado en utilizarlo como dada su inconveniente esta propiedad también puede hacer que sus sub-elementos opacos también.

propiedad opaca es una muy buena herramienta cuando se trata de estilo imágenes. Así se divierten usando!


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *