我使用 headroom.js在滚动条上隐藏/显示导航栏。效果很好。向上滚动时,导航具有纯色背景,当导航位于顶部时,背景应该是透明的。在 Chrome 上没有问题,但在 Safari 上有问题。
标记:
<header class="headroom navigation">
<div> class="navigation__bg">...</div>
</header>
CSS:
.headroom--not-top {
.navigation__bg {
background-color: red;
}
}
.headroom--pinned {
transform: translateY(0%);
.navigation__bg {
background-color: transparent; // becomes black on Safari most times
}
}
.headroom {
will-change: transform;
transition: transform .5s linear;
}
我不明白为什么背景变黑了。有什么原因吗?
最佳答案
首先你有
<div> class="navigation__bg">...</div>
应该是:(关闭太早)
<div class="navigation__bg">...</div>
其次设置你的
background-color: transparent;
到
background-color: white, rgba(255,255,255,0);
在 safari 中作为透明 = 黑色透明 (rgba(0,0,0,0))
关于html - 在 Safari 中从纯色更改时透明背景变为黑色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46605310/