CSS如何在悬停时从白色过渡到背景
Posted
技术标签:
【中文标题】CSS如何在悬停时从白色过渡到背景【英文标题】:CSS How to Transition from White to Background on Hover 【发布时间】:2012-12-05 09:13:34 【问题描述】:我正在尝试创建从白色背景到图像背景的过渡。这样,当查看器将鼠标悬停在某个部分上时,它会从普通变为样式。
这是我当前的代码:
div.camp
background: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 8px;
padding: 8px;
transition: all 1s linear 0s;
div.camp:hover
background: #EFFFD5 url("http://www.alpinejosh.com/host/sp/images/camp.png");
background-position: center bottom;
background-repeat: repeat-x;
border: 1px solid #CECECE;
这是代码所在的页面:http://www.summitpost.org/eldorado-peak/150316#chapter_7
据我了解,背景颜色过渡很容易。但似乎不支持背景图像进行过渡。
【问题讨论】:
【参考方案1】:很遗憾,您不能按照您指定的方式在背景图像上使用过渡。你可以看到W3C list of animation property types here。
您可以将白色背景放在顶部,然后在悬停时为其不透明度设置动画(以显示下方的图像)。
代码示例
你显然可以让这个更漂亮。我只是拼凑一些东西给你一个想法。
div.camp
border: 1px solid #CCCCCC;
background: #EFFFD5 url("http://www.alpinejosh.com/host/sp/images/camp.png");
background-position: center bottom;
background-repeat: repeat-x;
border-radius: 8px;
position: relative;
div.camp-overlay
padding: 8px;
border-radius: 8px;
position: absolute;
z-index:50;
width: 100%;
height: 100%;
background:white;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
div.camp-overlay:hover
background: rgba(255,255,255,0); /* use opacity for older browsers*/
上述 CSS 的 HTML
<div class="camp">
<div class="camp-overlay"></div>
</div>
上面的JSFiddle
http://jsfiddle.net/p7mcy/
【讨论】:
哇!这看起来很棒。太糟糕了,不可能在单个 DIV 元素中执行此操作。那好吧。希望在未来的 CSS 中将其他元素添加到 opacity 属性中。无论如何,非常感谢。我迫不及待想测试这段代码。 @JoshLewis 希望它对你有用。如果它确实起作用,请不要忘记将其标记为答案:)【参考方案2】:您可以做的是制作两个 div 元素,一个在另一个之上,然后在悬停时淡出顶部 div。
<div class="wrapper">
<div class="image"></div>
<div class="white-bg"></div>
</div>
.wrapperposition:relative;
.image, .white-bgposition:absolute; top:0; left:0; width:100px; height:50px;
.imagebackground:red;
.white-bgbackground:white; z-index:9999; -webkit-transition:opacity 0.3s linear; opacity:1;
.white-bg:hoveropacity:0;
应该可以 小提琴:http://jsfiddle.net/b46z8/5/
【讨论】:
感谢您的回复。在您的示例页面中,它似乎不会根据您给它的时间淡出。 (我目前使用的是 Firefox 版本 17) 我的示例仅适用于基于 webkit 的浏览器。要在 Firefox 中使用过渡,您需要添加 -moz-transition:opacity 0.3s linear;以上是关于CSS如何在悬停时从白色过渡到背景的主要内容,如果未能解决你的问题,请参考以下文章