Question

我在https://picup.it的主页上通过课程设置了拉伸背景

<div class="bg-background">

其定义如下：

.bg-background {
    height: 100%; 
}

.bg-background:after{
    background: url({% static "images/picup-bg-01.jpg" %}) no-repeat;
    background-size: 100%;
    content: "";
    opacity: 0.6;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
};

然而，它在localhost上看起来略有不同。在制作（picup.it）中，背景图像被拉伸到屏幕大小 - 您可以观察到在向下滚动带有面板的div后，它将超出背景图像。

在localhost上，背景图片覆盖整个div并且在滚动下方 - 直到div结束的地方。

为什么呢？与Chromium和Firefox相同。

Answer 1

将背景图像添加到您的身体并修复该图像

体 {

    background: #fff url(/static/images/picup-bg-01.jpg) no-repeat fixed;

}

Answer 2

尝试使用此语法

.bg-background {
    background:url({% static "images/picup-bg-01.jpg" %}) center no-repeat;
    height:565px; /* just pick a random height */
    width:100%;
    position:absolute;
    opacity: 0.6;
    background-size:100%;
    z-index: -1;
}

也可能是因为你没有指定高度，因此它的缩放比例不同。

第二个解释，在检查你的html dom struture之后。

<body>
<div class='bg-background'>
   <!--- html content -->
</div>
</body>

应该是这个

<body>
<div class='bg-background'>
</div>
<div id='body-content'>
<!-- html content -->
</div>
</body>

Answer 3

您有任何浏览器扩展程序吗？可能是CSS代码被注入页面。

第二个想法：

您可以尝试将代码更改为：

background-image: url('images/picup-bg-01.jpg');

为一，并保持：

background-size: 100%;
content: "";
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;

修改

如果您使用Tryit Editor网站中的w3schools，您会发现您的CSS代码与您网站上的CSS代码完全一样（具有未拉伸的高度），而使用{{ 1}}在同一编辑器中确实为您提供了预期的100％高度尺寸。

编辑＃2：

实际上，这并不是我在编写EDIT＃1时所说的。如果我在编辑器中使用页面background-image的样式代码，我会得到您当前在您网站上的内容。但是，如果我在body中使用它，则会正确缩放。

我提供的代码似乎在这两种情况下工作。

背景图像在服务器上呈现不同，然后在localhost上呈现

3 个答案: