Latest web development tutorials

CSS imagen transparente / opaco

El uso de CSS es fácil crear una imagen transparente.

Nota: la propiedad CSS opacidades parte de las recomendaciones del W3C CSS3.


Ejemplos

más ejemplos

Crear una imagen transparente - coloque el efecto

Crear un cuadro de texto tiene una imagen de fondo transparente


Ejemplo 1 - Crear una imagen transparente

La transparencia en la propiedad de CSS3 esla opacidad.

En primer lugar, vamos a mostrar cómo crear una imagen transparente con CSS.

imagen normal

klematis

La misma imagen con la transparencia:

klematis

Considere el siguiente CSS:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

IE9, Firefox, Chrome, el navegador Opera, y Safari utiliza las propiedades de transparencia de la imagen puede ser opaco. valor de la propiedad de opacidad con 0.0 - 1.0. Los valores más bajos hacen que el elemento más transparente.

IE8 y versiones anteriores utilizan filtro: alfa (opacidad = x). X puede tomar valores de 0 - 100. Los valores más bajos hacen que el elemento más transparente.


Ejemplo 2 - Transparencia imagen - coloque el efecto

Mover el puntero del ratón sobre la imagen:

klematisklematis

estilo CSS:

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 */
}

El primer bloque es el código CSS en el Ejemplo 1, y similares. Además, también hemos añadido lo que sucede cuando el usuario mueve los elementos emergentes del ratón sobre una de las imágenes. En este caso, cuando el usuario mueve el puntero del ratón sobre la imagen, esperamos que la imagen sea clara.

Se trata deCSS: opacidad = 1.

IE8 yuso anterior: filtro: alfa (opacidad = 100 ).

Cuando el puntero del ratón fuera de la imagen, la imagen será re-transparencia.


Ejemplo 3 - Transparente cuadro de texto

El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente. El texto en el cuadro transparente.

El código fuente es el siguiente:

<html>
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
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.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

En primer lugar, creamos una altura fija y ancho del elemento div una imagen de fondo y la frontera con. Entonces se crea una más pequeños elementos div dentro de la primera div. Esta div también tienen una anchura fija, color de fondo, frontera - y es transparente. En el interior del div transparente, añadimos un poco de texto en el interior del elemento P.