css - 屏幕缩小时背景尺寸被截掉了一部分

Question

这是测试链接:

http://kotechweb.com/ig112/

问题是，我发现当我缩小窗口屏幕时，背景宽度只有窗口的大小，当我滚动时，另一部分切掉了背景。

代码:

<div style="background:url('./assets/image/bg4.jpg'); padding-top:20px;">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        ....                    
                    </div>    
                </div>  
            </div>  
        </div>

另外，一个后台自定义了这样的CSS:

background: url('./image/bg1.jpg') top;
padding: 20px 0px;
background-position: 0px -20px;
background-size: 100% 99%;

非常感谢您的帮助。

Answer 1

我假设水平滚动不是您想要的，因为您包含了 Bootstrap 库。

在您的 style.css 中，您已经覆盖了默认的 .container 大小，这破坏了页面的响应能力:

.container {
    width:960px !important;
}

如果您删除它，您的页面将变为响应式，但有一个异常(exception)。

您的 .top_btn 类具有绝对位置。这不利于响应，因为它会将这些元素推到体外。如果您的 left 和 top 属性是百分比，您可以继续将它们作为 position:absolute 。或者将这些图像分割成 3 个不同的图像并让它们分别链接，而不是将图像绝对定位在一个图像上。