使背景淡出/在

有什么办法可以使用CSS3淡入淡出<div>的纯白色背景吗？内容应该保持可见，所以背景应该消失。使背景淡出/在

任何想法使用css3转换/转换？

谢谢你的帮助。

2011-10-01 cmplieger

当然，你可以在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;  
}

这里有一个红色的背景上:hover淡出an example。

来源

2011-10-01 20:41:36 Pat

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

@Husky转换非常好，但我期待着我们可以放弃所有浏览器特定的前缀。 – Pat

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

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

然而，使用CSS 3做过渡将限制在不支持它的浏览器的效果。

来源

2011-10-01 20:40:45 KryptoniteDove

非常好的方法，+1为良好的指导 – doniyor

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

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

来源

2011-10-01 20:42:53 Husky

感谢您的建议。我最终设置第一种颜色内联在div上，第二种颜色（即白色）作为背景颜色：white！important;以及过渡财产。 – Frank

使背景淡出/在

回答

相关问题