La creación de imágenes transparentes con CSS es fácil.
El CSS opacity propiedad es una parte de la recomendación CSS3.
Ejemplo 1 - Creación de una imagen transparente
La propiedad CSS3 para la transparencia es opacity .
En primer lugar, te mostraremos cómo crear una imagen transparente con CSS.
imagen regular:
La misma imagen con la transparencia:
Mira el siguiente CSS:
Ejemplo
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
Inténtalo tú mismo " La opacity propiedad puede tener valor comprendido entre 0,0 - 1,0. El valor más bajo, el más transparente.
IE8 y uso anterior filter:alpha(opacity=x) . La x puede tener un valor de 0 - 100. Un valor más bajo hace que el elemento más transparente.
Ejemplo 2 - Transparencia imagen - Efecto Hover
Pase el ratón sobre las imágenes:
El CSS se ve así:
Ejemplo
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Inténtalo tú mismo " El primer bloque de CSS es similar al código en el Ejemplo 1. Además, hemos añadido lo que debe suceder cuando un usuario se desplaza sobre una de las imágenes. En este caso queremos que la imagen no sea transparente cuando el usuario se desplaza sobre él. El CSS para esto es opacity:1; .
Cuando el puntero del ratón se aleja de la imagen, la imagen será transparente de nuevo.
Ejemplo 3 - Texto en caja transparente
Esto es un texto que se coloca en la caja transparente.
El código fuente es el siguiente:
Ejemplo
<html>
<head>
<style>
div.background
{
background: url(/css/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Inténtalo tú mismo " En primer lugar, creamos un <div> elemento (class="background") una imagen de fondo, y una frontera. Entonces se crea otra <div> (class="transbox") dentro de la primera <div> . La <div class="transbox"> tiene un color de fondo, y una frontera - el div es transparente. Dentro de la transparencia <div> , añadimos un poco de texto dentro de un <p> elemento.