悬停时div的背景图像转换不起作用[重复]
Posted
技术标签:
【中文标题】悬停时div的背景图像转换不起作用[重复]【英文标题】：background-image transition for div on hover is not working [duplicate] 【发布时间】：2018-06-23 00:13:36 【问题描述】：我有一个 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>我做错了吗？
如果有人能帮忙就太好了！
非常感谢
【问题讨论】：
***.com/questions/6542212/… 【参考方案1】：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>【讨论】：
当您在元素上使用不透明度时，您应该从渐变中移除不透明度；） @sol 这几乎可以工作。唯一的问题是我的标题中有一个徽标文本，并且伪元素似乎覆盖了白色文本，而我只需要背景来进行过渡。我已经尝试将徽标的 div（在标题中）设置为更高的 z-index，但这没有任何效果。 @AlphaX 不要忘记添加相对于徽标的位置以便能够使用 z-index @AlphaX 我已经更新了 sn-p，猜测您的标记。您只需添加position: relative 即可为徽标创建新的堆叠上下文。
@sol 是的，成功了！！！太感谢了 ！！！！这很奇怪，因为只要将位置设置为相对，它也可以在没有 z-index 的情况下工作！？以上是关于悬停时div的背景图像转换不起作用[重复]的主要内容，如果未能解决你的问题，请参考以下文章
CSS :hover on button 在已经悬停的 div 中不起作用