Css 背景尺寸：封面不能覆盖整个可滚动页面_Css_Background Image_Background Size

Css 背景尺寸：封面不能覆盖整个可滚动页面

css

Css 背景尺寸：封面不能覆盖整个可滚动页面,css,background-image,background-size,Css,Background Image,Background Size,我试图有一个图像作为背景。背景图像应覆盖整个可滚动页面（宽度+高度）。而背景图像不应该是固定的，它也应该滚动以下是html示例： <html> <head></head> <body> <div class="content"></div> </body> </html> 这是当您查看JSFIDLE代码段时，蓝色的背景色应该根本不可见——它应该被背景图像覆盖有没有办法做到这

我试图有一个图像作为背景。背景图像应覆盖整个可滚动页面（宽度+高度）。而背景图像不应该是固定的，它也应该滚动

以下是html示例：

<html>
  <head></head>
  <body>
    <div class="content"></div>
  </body>
</html>

这是

当您查看JSFIDLE代码段时，蓝色的背景色应该根本不可见——它应该被背景图像覆盖

有没有办法做到这一点？

html，
身体{
身高：100%！重要；
溢出：自动！重要；
}
身体：以前{
内容：“；
位置：固定；
显示：块；
排名：0；
左：0；
右：0；
底部：0；
z指数：-1；
背景颜色：蓝色；
背景重复：无重复；
背景位置：中上；
背景附件：固定；
背景尺寸：封面；
背景图像：url（'https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
}
.内容{
高度：1800px；
宽度：200px；
背景色：白色；
保证金：自动；
}

移除

高度：100%

，改为

最小高度。您还可以这样简化代码：

正文{
最小高度：100%；
背景颜色：蓝色；
位置：相对位置；
保证金：0；
}
身体：以前{
内容：“；
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
背景重复：无重复；
背景位置：中上；
背景尺寸：封面；
背景图像：url（'https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
}
.内容{
高度：1800px；
宽度：200px；
背景色：白色；
保证金：自动；
位置：相对位置；
z指数：1；
}
为什么要对：后面的伪标记执行此操作。为什么不直接到车身塔吉那里去呢。你想让我发布一个答案吗？蓝色在JSFIDLE中根本看不见…@GerardoBLANCO，因为我用它做了一些过滤-例如模糊。但它与问题无关，所以我没有包括这些信息。正如我在开始时所说，我希望背景图像“不固定”，它在滚动时应该移动。有办法吗？就这样！几乎。有机会让它与伪标记一起工作吗？由于额外的过滤（模糊等）@TomC。是的，当然可以updating@TomC. 看一看
html, body
{
  height: 100% !important;
  overflow: auto !important;
}

body:before {
    content: "";
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: blue;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
    background-image: url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
}

.content {
    height: 1800px;
    width: 200px;
    background-color: white;
    margin: auto;
}