Question

我真的需要你的帮助。我是这个领域的初学者，我坚持我的学校项目，必须在几天内完成。我编写了一个页面，其白色背景占据了屏幕的整个宽度，我想要的是我的页面的左侧和右侧是灰色背景，我的内容的背景保持白色和向中心推了一下。此外，底部和顶部必须保持不变，正如我所说，我只需要改变左右两侧。

更具体地说，具有灰色背景的边需要像95像素宽（约2-3厘米）。那么我该如何用CSS做到这一点？ html || this is the end of my html although I couldn't screenshot the closing divs 非常感谢提前

Answer 1

为什么不将页面的background-color更改为灰色并应用1个背景图像（白色）并垂直重复，而不是尝试制作2个左右背景。首先在你的css中声明background-color，然后在之后声明图像。您可以使用background-size调整背景的大小。

有用的工具：https://www.w3schools.com/cssref/pr_background-repeat.asp

Answer 2

您可以使用<div>。

执行此操作

首先，你的html结构应如下所示：

<!doctype HTML>
<html>
    <head>
        <!-- Your head stuff -->
    </head>
    <body>
        <div class="content">
            <!-- Your content here, you can use every html tag in here -->
        </div>
    </body>
</html>

然后你的CSS应该是这样的：

body {
    /* This sets the background color of the entire page to gray */
    background:#AAA;
}

.content { /* Select the div with the "content"-class (indicated by the dot) */
    background:#FFF; /* white background */
    width:60%; /* how much space the content should take up */

    /* These two lines center the div */
    margin-left:auto;
    margin-right:auto;
}

您可以将css写入.css文件并将以下代码写入<head>以导入它（推荐）：

<link rel="stylesheet" type="text/css" ref="path/to/the/file.css" />

或者您可以在<style></style>中创建<head> - 标记对，然后在其中写下css。

Answer 3

将正文背景设置为灰色，然后将白色背景设置为container-fluid 并将其设置为容器流体：

.container-fluid {
margin : 0 auto;
witdh : your custom width;
}

用CSS改变背景

3 个答案: