使背景淡出/淡入

Posted 2023-03-13

【中文标题】使背景淡出/淡入

【英文标题】：Make background fade out/in

【发布时间】：2011-11-29 04:26:40

【问题描述】：

有什么方法可以使用 CSS3 淡入和淡出 <div> 的纯白色背景？ 内容应该保持可见，所以只有背景应该褪色。

有任何使用 css3 过渡/变换的想法吗？

感谢您的帮助。

【参考方案1】：

当然，你可以直接在background-color上使用transition property：

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;      

这是an example 的红色背景在:hover 上淡出。

【讨论】：

不知道您实际上可以为背景颜色设置动画。我认为这比我的解决方案要好得多:)

@Husky Transitions 非常出色，但我期待我们何时可以删除所有浏览器特定的前缀。

你可以使用 LESS / SASS 并在那里使用 mixins。如果您使用大量 CSS3 属性，至少可以忍受。

@Husky 我还没有尝试过 LESS/SASS，但是是的，前缀绝对是一个很好的论据。

感谢 jsfiddle！这是一个分叉的样本，加载后会淡出背景颜色jsfiddle.net/divzero/Ddhwx

【参考方案2】：

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

但是，使用 CSS 3 进行过渡会将效果限制在不支持它的浏览器上。

【参考方案3】：

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

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

【讨论】：

感谢您的建议。我最终在 div 上设置了第一种颜色，将外部的第二种颜色（即白色）设置为 background-color: white !important;以及过渡属性。