Css 没有固定位置的假背景透明度/效果_Css_Background

Css 没有固定位置的假背景透明度/效果

css

Css 没有固定位置的假背景透明度/效果,css,background,Css,Background,我试图模仿这种效果：在我的博客上：它可以工作，但有一个问题：Firefox的页面滚动速度非常慢。如果我使背景附件不“固定”，它不再滞后，但效果不起作用。如果没有固定的定位或某种程度上的滞后，是否可以达到这种效果我尝试过使用百分比背景位置，但它似乎是基于元素的宽度而不是页面的宽度来定位的，因此我无法根据不同的窗口大小将其正确排列。您可以将完整的正文内容包装在一个额外的DIV中： <body> <div id="content-container> ...

我试图模仿这种效果：在我的博客上：

它可以工作，但有一个问题：Firefox的页面滚动速度非常慢。如果我使背景附件不“固定”，它不再滞后，但效果不起作用。如果没有固定的定位或某种程度上的滞后，是否可以达到这种效果

我尝试过使用百分比背景位置，但它似乎是基于元素的宽度而不是页面的宽度来定位的，因此我无法根据不同的窗口大小将其正确排列。

您可以将完整的正文内容包装在一个额外的DIV中：

<body>
    <div id="content-container>
    ...
    </div>
</body>

现在是包装容器DIV承载滚动条。因此，在滚动内容时，带有背景图像的主体将保持固定。

我修改了设计，使用像素边距而不是百分比，因此它现在“起作用”，但我更愿意使用百分比。。。

html, body {
    overflow:hidden;
    height:100%;
}

div#content-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
}