Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS Opacidad de imagen / Transparencia


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:

klematis

La misma imagen con la transparencia:

klematis

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:

klematisklematis

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.


Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2»