2011-10-01 20 views
9

¿Hay alguna manera de que pueda usar CSS3 para fundirse y salir un fondo blanco sólido de <div>? el contenido debe permanecer visible para que solo el fondo se desvanezca.Hacer fundido de fondo/

¿Alguna idea sobre el uso de las transiciones/transformaciones css3?

gracias por su ayuda.

Respuesta

16

Claro, usted puede utilizar el transition property directamente en la background-color:

div { 
    background-color: white;  

    /* transition the background-color over 1s with a linear animation */ 
    transition: background-color 1s linear; 
} 

/* the :hover that causes the background-color to change */ 
div:hover { 
    background-color: transparent;  
} 

Aquí es an example de un fondo rojo desvanecimiento en :hover.

+0

No sabía que realmente podría animar el color de fondo. Creo que es mucho mejor que mi solución :) – Husky

+0

@Husky Las transiciones son bastante excelentes, pero estoy ansioso por saber cuándo podemos descartar todos los prefijos específicos del navegador. – Pat

+0

podrías usar LESS/SASS y usar los mixins allí. Al menos lo hace soportable si está usando muchas propiedades de CSS3. – Husky

0

Puede tener dos divs en un contenedor div. El primer div contiene el fondo blanco, el segundo obtiene el contenido.

A continuación, utilice una transformación CSS3 para animar la opacidad del primer div a cero.

+0

Gracias por la sugerencia. Finalmente coloqué el primer color en línea en el div y el segundo color (es decir, blanco) externo como color de fondo: blanco! Importante; así como la propiedad de transición. – Frank