calc()实现满屏背景定宽内容

2023-12-14css教程

要实现“calc()实现满屏背景定宽内容”的效果，需要进行如下步骤：

1. 使用calc()计算内容区域宽度

我们可以使用calc()进行宽度计算，计算的公式为：100% - 定宽内容区域宽度。例如，如果我们需要固定内容区域宽度为800px，那么公式就是：calc(100% - 800px)。

2. 设置内容区域的宽度

使用上一步计算好的数值，将其作为内容区域的宽度进行设置。例如，我们可以这样设置：

.container {
  width: calc(100% - 800px);
  margin-left: auto;
  margin-right: auto;
}

这里的.container是内容区域的容器，在宽度计算完成后，布局会自动居中。

3. 设置背景样式

最后，为了实现满屏背景的效果，我们需要为body元素设置背景样式，并保证它的高度和宽度都为100%。具体设置如下：

body {
  background-image: url('bg.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

这里的bg.jpg就是背景图片，设置position为center center是为了让它在中心位置，设置repeat为no-repeat是为了避免重复，设置size为cover是为了保证背景图片的宽度和高度都覆盖整个页面。

示例

假设我们的页面需要固定内容区域宽度为800px，并且背景图片为bg.jpg，那么完整的代码示例如下：

<!DOCTYPE html>
<html>
<head>
  <title>calc()实现满屏背景定宽内容</title>
  <style>
    body {
      background-image: url('bg.jpg');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .container {
      width: calc(100% - 800px);
      margin-left: auto;
      margin-right: auto;
      background-color: #fff;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>这里是内容区域</h1>
    <p>内容可以放在这里</p>
  </div>
</body>
</html>

在这个示例中，我们将容器的背景颜色设置为白色，并在内容区域中添加了标题和一段文字，这些内容会被限制在800px的宽度内，并且整个页面都有满屏的背景图。

The End