鼠标悬停时div的背景图像过渡不起作用
[英]background-image transition for div on hover is not working
问题描述
我有一个div，希望对悬停有过渡效果。
我整理了以下CSS代码，但过渡功能在chrome或firefox中均无效。
#header { border: 0.1px solid #666; background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); height: 10vh; padding: 0; transition: background-image 1s ease-in-out; /* NOT WORKING */ -webkit-transition: background-image 1s ease-in-out; /* NOT WORKING */ } #header:hover { background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.0)); }
<html> <body> <div id="header"> this is my header</div> </body> </html>
我做错什么了吗？
如果有人可以帮助，那就太好了！！
非常感谢
2 个解决方案
解决方案1
1 已采纳 2018-01-13 22:22:05
CSS渐变不支持transition属性。
对于您的情况，可以通过使用pseudoelement并在悬停时过渡其不透明度来创建类似的效果。
#header { border: 0.1px solid #666; height: 10vh; padding: 0; position: relative; } #header:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: .5; transition: opacity 1s ease-in-out; background: linear-gradient(black, transparent); } #header:hover:before { opacity: .75; } .logo { color: white; position: relative; }
<div id="header"><div class="logo">LOGO</div></div>
解决方案2
0 2018-01-13 22:38:27
您不能像这样在background-image上应用过渡效果。 您需要对另一个属性应用过渡。 例如，您可以在背景上使用多个渐变，并在background-size上应用过渡：
#header { border: 0.1px solid #666; background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.0)), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-size: 100% 0% , auto; background-repeat:no-repeat; height: 10vh; padding: 0; transition: background 1s ease-in-out; -webkit-transition: background 1s ease-in-out; } #header:hover { background-size: 100% 100%, auto; }
<div id="header"> this is my header</div>
背景图像过渡无法正常工作？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.