Make background fade out/in

Is there any way I can use CSS3 to fade in and out a solid white background of a <div>? the content should remain visible so just the background should fade.

Any idea开发者_Python百科s using css3 transitions/transforms?

thank you for your help.

Sure, you can use the transition property directly on the 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;      
}

Here's an example of a red background fading out on :hover.

You may find this useful for examples of image and background color fades: - http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html

However using CSS 3 to do the transition will limit the effect to browsers that don't support it.

You could have two divs in one container div. The first div contains the white background, the second one gets the content.

Then, use a CSS3 transform to animate the opacity of the first div to zero.