使背景淡入/淡出 [英] Make background fade out/in

问题描述

有什么方法可以使用CSS3淡入和淡出<div>的纯白色背景吗? 内容应保持可见，因此背景应淡入.

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过渡/转换的想法吗?

Any ideas using css3 transitions/transforms?

感谢您的帮助.

推荐答案

当然，您可以使用转换属性直接在background-color上:

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

这是一个示例，其中红色背景在:hover上淡出.

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

这篇关于使背景淡入/淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！