[英]Transparent background becomes black when changing from solid colour in Safari
I use headroom.js to hide/show navbar on scroll. 我使用headroom.js隐藏/显示滚动条上的导航栏。 Works great.
效果很好。 On scrolling up, nav has a solid background colour and when nav is at top, background should be transparent.
向上滚动时,导航具有纯背景色,并且当导航位于顶部时,背景应该是透明的。 No issues on Chrome but an issue with Safari.
Chrome上没有问题,但Safari有问题。
Markup: 标记:
<header class="headroom navigation">
<div> class="navigation__bg">...</div>
</header>
CSS: 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;
}
I cant see why the bg becomes black. 我看不出为什么BG变成黑色。 Any reason?
任何原因?
Well for starters you have 对于初学者来说,
<div> class="navigation__bg">...</div>
it should be: (Closing too early) 应该是:(过早关闭)
<div class="navigation__bg">...</div>
Secondly set your 其次设置你的
background-color: transparent;
to 至
background-color: white, rgba(255,255,255,0);
As transparent = black transparent (rgba(0,0,0,0)) in safari 在Safari浏览器中为透明=黑色透明(rgba(0,0,0,0))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.