Este artículo le presentará un concepto que le ayudará a comprender la opacidad en y le dirá cómo controlar este parámetro. En este artículo se cubrirán los siguientes consejos,
- Opacidad en CSS
- Opacidad heredada con elementos en cascada
- Configuración de atributo RGBA para elementos en cascada
- Cambios de opacidad en el efecto de desplazamiento
La opacidad de fondo de un elemento es una función útil en el diseño HTML. Al establecer el nivel de opacidad (inverso de la transparencia), un diseñador puede controlar la visibilidad del elemento a través de la propiedad de opacidad de CSS. Esto se usa generalmente como configuración de fondo cuando hay una cascada de elementos, colocados uno encima del otro.
El escenario más común en el que se utiliza esta función es este:
- Una imagen de fondo parcialmente transparente se coloca detrás de un elemento de texto.
- La imagen de fondo es vagamente visible, por lo que no domina el texto al frente.
- La imagen puede estar completamente enfocada cuando el usuario elige explícitamente verla.
Es posible que desee leer sobre el antes de seguir aprendiendo sobre la opacidad de CSS.
Para obtener un tutorial completo de CSS, visite Tutorial de Edureka CSS para principiantes . Obtendrá un excelente aviso sobre la forma en que se utilizará CSS para aumentar el diseño web HTML.
Continuando con este artículo sobre opacidad en CSS
Opacidad en CSS
En CSS, la opacidad se establece como un valor numérico que varía entre 0,0 y 1,0. Los valores más cercanos a cero representan más transparencia, la imagen tendrá una visibilidad muy clara. Comencemos con un ejemplo de una imagen que se muestra con un 50% de transparencia. Vea el ejemplo 1 a continuación.
Ejemplo 1: imagen de fondo configurada en semi transparencia
img {opacidad: 0.5 filtro: alfa (opacidad = 50) / * Para IE8 y anteriores * /} 
Ejemplo 1: Salida
Imagen original (100% de opacidad)
Imagen con configuración de 50% de opacidad
En el ejemplo anterior, solo había un elemento: una imagen. También se pueden configurar otros elementos con el parámetro de opacidad, como texto, elementos div, etc.
Continuando con este artículo sobre opacidad en CSS
Opacidad heredada con elementos en cascada
Cuando los elementos se apilan uno sobre otro, si el elemento de fondo tiene la configuración de opacidad, todos los elementos secundarios lo heredan. Este es el Configuración predeterminada . Eso significa que si se coloca un cuadro de texto sobre una imagen y la imagen tiene una configuración de opacidad de 0.5, tanto la imagen como el elemento de texto solo serán parcialmente visibles.
Tomemos la instancia de un elemento de texto secundario colocado sobre la imagen de TOM & JERRY en nuestro siguiente ejemplo. Podemos ver el efecto de opacidad predeterminado en el Ejemplo 2.
.container {posición: texto relativo-alineación: centro opacidad: 0.5} .centered {posición: parte superior absoluta: 50% izquierda: 50% transformar: traducir (-50%, -50%) color: azul tamaño de fuente: 40px} } TOM JERRYEjemplo 2: el texto hereda la opacidad de la imagen principal
Continuando con este artículo sobre opacidad en CSS
Configuración de atributo RGBA para elementos en cascada
Hay otra forma en la que se puede controlar la opacidad con elementos en cascada. Si desea que el elemento secundario no se vea afectado por la opacidad de su elemento de fondo, puede usar Configuración de atributo RGBA .
Ejemplo 3: uso de la configuración RGBA
background: rgba (76, 175, 80, 1.0) / * La imagen no tiene configuración de opacidad * / / * Fondo verde para texto con 100% de opacidad * / / * El texto en color azul tiene 100% de opacidad * /
background: rgba (76, 175, 80, 0.4) / * La imagen no tiene configuración de opacidad * / / * Fondo verde para texto con 40% de opacidad * / / * Texto azul todavía visto con 100% de opacidad * /
puede usar la clase printwriter para abrir un archivo para escribir y escribir datos en él.
Después del código de color RGB, el atributo 'a' significa alfa . los alfa El parámetro es un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco).
Continuando con este artículo sobre opacidad en CSS
Cambios de opacidad en el efecto de desplazamiento
En algunos escenarios, los diseñadores web quieren que la opacidad varíe dependiendo de si el usuario se centra en el elemento o no. Por ejemplo, digamos que una imagen está configurada al 50% de opacidad de forma predeterminada. Sin embargo, cuando el usuario pasa el mouse sobre la imagen, queremos que la imagen se enfoque completamente con un 100% de opacidad.
El ejemplo 4 muestra cómo se hace esto.
Puntos comunes a tener en cuenta:
- La configuración de opacidad es una alternativa al uso del atributo 'visibilidad' en CSS. Sin embargo, el uso de la configuración de opacidad facilita la configuración de distintos grados de transparencia, desde cero hasta total.
- El nivel de opacidad debe establecerse después de una prueba cuidadosa en varios navegadores. Cuando la opacidad se establece en valores bajos, a veces el texto o la imagen pueden volverse completamente invisibles o ilegibles.
- La idea detrás del uso de la opacidad es poner un enfoque nítido en algunos elementos mientras que otros elementos de fondo no distraen la atención del usuario. Por lo tanto, estos elementos de fondo se configuran con menor opacidad.
- En Internet Explorer, para IE8 y versiones anteriores, la propiedad de opacidad es una configuración de 'filtro' que varía de 1 a 100. En todos los demás navegadores, varía de 0 a 1.
Esto nos lleva al final de este artículo sobre Opacidad en CSS.
Si está interesado en obtener más información sobre el desarrollo web, consulte la por Edureka. La capacitación para la certificación de desarrollo web lo ayudará a aprender cómo crear sitios web impresionantes utilizando HTML5, CSS3, Twitter Bootstrap 3, jQuery y las API de Google, e implementarlo en Amazon Simple Storage Service (S3).
Si aún está interesado Si tiene alguna pregunta, puede publicarla en la sección de comentarios de este blog “Opacidad en CSS” y nos comunicaremos con usted lo antes posible.