in

Opacidad / transparencia de la imagen CSS

img forest

los opacity propiedad especifica la opacidad / transparencia de un elemento.


Imagen transparente

los opacity La propiedad puede tomar un valor de 0,0 a 1,0. Cuanto menor sea el valor, más transparente:

bosque

opacidad 0,2

bosque

opacidad 0.5

bosque

opacidad 1
(defecto)


Efecto de desplazamiento transparente

los opacity La propiedad se usa a menudo junto con el :hover
selector para cambiar la opacidad al pasar el mouse:

Ejemplo explicado

El primer bloque CSS es similar al código del Ejemplo 1. Además, hemos agregado lo que debería suceder cuando un usuario pasa el mouse sobre una de las imágenes. En este caso, queremos que la imagen NO sea transparente cuando el usuario pasa el mouse sobre ella. El CSS para esto es opacity:1;.

Cuando el puntero del mouse se aleja de la imagen, la imagen volverá a ser transparente.

Un ejemplo de efecto de desplazamiento invertido:



Caja transparente

Al usar el opacity para agregar transparencia al fondo de un elemento, todos sus elementos secundarios heredan la misma transparencia. Esto puede hacer que el texto dentro de un elemento completamente transparente sea difícil de leer:


Transparencia usando RGBA

Si no desea aplicar opacidad a los elementos secundarios, como en nuestro ejemplo anterior, use RGBA valores de color. El siguiente ejemplo establece la opacidad del color de fondo y no del texto:

Aprendió de nuestro Capítulo Colores CSS, que puede usar RGB como valor de color. Además de RGB, puede utilizar un valor de color RGB con un canal alfa (RGBA), que especifica la opacidad de un color.

Un valor de color RGBA se especifica con: rgba (rojo, verde, azul, alfa). los
alfa El parámetro es un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco).

Propina: Aprenderá más sobre los colores RGBA en nuestro capítulo Colores CSS.

Ejemplo

div {
background: rgba (76, 175, 80, 0.3) / * Fondo verde con 30% de opacidad * /
}

Inténtalo tú mismo »


Texto en caja transparente

Este es un texto que se coloca en el cuadro transparente.

Ejemplo

div.background {
fondo: repetición de url (klematis.jpg);
borde: 2px negro sólido;
}

div.transbox {
margen: 30px;
color de fondo: #ffffff;
borde: 1px negro sólido;
opacidad: 0,6;
}

div.transbox p {
margen: 5%;
font-weight: negrita;
color: # 000000;
}


Este es un texto que se coloca en el cuadro transparente.


Inténtalo tú mismo »

Ejemplo explicado

Primero, creamos un elemento

(class = «background») con una imagen de fondo y un borde.

Luego creamos otro

(class = «transbox») dentro del primer

.

El

tiene un color de fondo y un borde: el div es transparente.

Dentro del

transparente, agregamos algo de texto dentro de un elemento

.


¡Ponte a prueba con ejercicios!

Deja una respuesta

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

oracle social share fb

oracley Nor1

how to download music from youtube on android1

Cómo descargar música de Youtube en Android