CSS 使背景淡出/淡入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7622822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make background fade out/in
提问by cmplieger
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.
有什么办法可以使用 CSS3 淡入和淡出 a 的纯白色背景<div>？内容应该保持可见，所以只有背景应该褪色。
Any ideas using css3 transitions/transforms?
任何使用 css3 转换/转换的想法？
thank you for your help.
感谢您的帮助。
回答by Pat
Sure, you can use the transition propertydirectly on the background-color:
当然，您可以直接在 上使用transition 属性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 exampleof a red background fading out on :hover.
这是一个红色背景淡出的示例:hover。
回答by KryptoniteDove
You may find this useful for examples of image and background color fades: - http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html
您可能会发现这对于图像和背景颜色褪色的示例很有用： - 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.
但是，使用 CSS 3 进行过渡会将效果限制在不支持它的浏览器中。
回答by Husky
You could have two divsin one container div. The first div contains the white background, the second one gets the content.
你可以有两个divs合二为一的容器 div。第一个 div 包含白色背景，第二个 div 获取内容。
Then, use a CSS3 transform to animate the opacity of the first div to zero.
然后，使用 CSS3 转换将第一个 div 的不透明度设置为零。
