使背景淡出/淡入

Question

有什么方法可以使用 CSS3 淡入和淡出

的纯白色背景吗？ 内容应该保持可见，因此只有背景应该褪色。

使用 css3 过渡/变换有什么想法吗？

感谢您的帮助。

Answer 1

当然，您可以直接在 background-colortransition 属性 code>：

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;      
}

这是红色背景在:hover上淡出的示例。

Answer 2

您可能会发现这对于图像和背景颜色淡入淡出的示例很有用：-
http://nettuts.s3.amazonaws.com/581_cssTransitions/demos.html

然而，使用 CSS 3 进行转换会限制不支持它的浏览器的效果。

Answer 3

您可以在一个容器 div 中包含两个 div。第一个 div 包含白色背景，第二个 div 获取内容。

然后，使用 CSS3 变换将第一个 div 的不透明度设置为零。