Question

即使在Windows上使用 CTRL + 滚动鼠标按钮调整大小，我也希望将网站的所有内容都置于全屏背景中。

网站示例：http://www.benzinga.com/

如果按 CTRL 并使用鼠标上的滚动按钮，您将看到标题的背景保持全屏，但内容保持居中。< / p>

是否可以仅使用HTML和CSS执行此操作？

你能告诉我怎么样吗？

Answer 1

我认为这就是你想要的。内容div的宽度应为px而不是%，以便正确缩放。

这是HTML：

<body>
    <div id="content">
    </div>
</body>

这是CSS：

    body {
        background:url('http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg');
        background-size:cover;
    }
    #content {
        background-color:red;
        width:1000px;
        height:500px;
        margin:auto;
    }

Answer 2

我的解决方案是使用Bootstrap的容器div。

包含Bootstrap后，

只需使用：

<div class="container">
    ...
</div>

内容将保持在页面中心的内容中，与您链接的网站非常相似，即使您放大也是如此。

具有固定背景的中心内容

2 个答案: