Question

我正在失去头发！我有一个全屏背景图像，可以在Firefox中正确显示（即固定），但在Chrome中它只能在没有滚动条的情况下正确显示？！页面越长，背景图像显示越大，在一个非常长的页面上背景图像是巨大的...我搜索了这个主题并找到了绝对具体的修复，但没有任何与我的情况直接相关的，如何我可以让Chrome表现出来吗？

代码：

<div id="background">
<img src="../images/37df8ead08594126a7be43e1bdf3cd00.jpg" alt="blah" class="main-bg" />
</div>

#background {
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
z-index: -1;
}

.main-bg{
position:absolute;
top:0;
left:0;
z-index:1;
width:100%;
}

非常感谢任何帮助!!

Answer 1

我不完全确定是否是这种情况，但你是否希望背景图像保持静止（当你向下或向上滚动图像时，你的滚动显示为“移动”，从不拉伸或重复）？ / p>

如果是这种情况，请尝试background-attachment:fixed并查看此内容 link

如果不是这种情况，您希望用背景图像实现什么目标？

Answer 2

这可以帮助您修复Chrome

例如：Chrome修复。

  @media screen and (-webkit-min-device-pixel-ratio:0){
              .CR_page_TD p { line-height:24px}//sample class
              .cr_Rightimgdiv {float:left}//sample class
               background-attachment:fixed//not tested yet 

}

在那个make中你想要专门写入chrome的类不要担心它不会影响其他浏览器，你可以在这个特定于Webkit浏览器的块中添加任意数量的类

Chrome CSS位置：已修复

2 个答案: