gpt4 book ai didi

html - Chrome : Fixed background is displayed as it wasn't fixed

转载 作者:太空宇宙 更新时间:2023-11-04 14:01:05 27 4
gpt4 key购买 nike

我不明白为什么我的固定背景开始出现,因为它有时没有被固定。

这是一个非常特殊的案例,我知道如何解决它。

您可以删除:

.row2 position:relative

row1 div -webkit-backface-visibility: hidden;

但我不明白为什么会出现这个问题,position:relative-webkit-backface-visibility:hidden 如何影响此行为。

我认为这个问题可以引起某人的兴趣。

这里是例子:JSfiddle

  <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>Theme Framework</title>
<style>
.row1 {
height:45px;
}
.row1 div {
height:47px;
-webkit-backface-visibility: hidden;
}
.row2 {
position: relative;
height:500px;
background-image:url(http://www.hdwallpapers.in/download/uphill_road-1024x768.jpg);
background-position: 50% 23px;
background-attachment: fixed;
background-size:cover;
}
</style>
</head>
<body>

<div class="row1">
<div>
</div>
</div>
<div class="row2"></div>

</body>
</html>

最佳答案

在这种情况下,看起来 backface-visibility 正在干扰 background-attachment。这里的关键是具有 backface-visibility 的元素比包含它的元素要高。这意味着它延伸到 row1 下面。将 overflow:hidden 添加到 row1 可解决此问题。

Working Fiddle

CSS:

  .row1 {
height:45px;
overflow: hidden;
}

就这里实际发生的事情而言。我的猜测(仍在寻找完整的答案)因为具有 backface-visibility 的元素重叠并覆盖了背景固定样式。可能是渲染引擎出错。

关于html - Chrome : Fixed background is displayed as it wasn't fixed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21511320/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com