Question

正如标题所说，我希望“背景”元素适合屏幕的一侧（你可以看到它不会一直向右），以及一直走到屏幕的底部。有人可以帮忙吗？

可在此处查看代码：codepen

（特别是这些元素）

```

.background {
  background: url("https://static.kent.ac.uk/nexus/ems/50.jpg");
  border: 3px solid black;
  margin: 0 auto;
}
.text {
  margin: 0 30px 0 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  height: auto;
}
.text p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
  opacity: 1;
}

```

Answer 1

在margin: -20px;上设置<header>将其拉出页面，然后创建水平滚动条，删除margin: -20px;标题将完全放在文档中滚动条将消失。

codepen

Answer 2

将边距和填充设置为0，然后将背景宽度设置为100％似乎可以解决问题。这是期望的结果吗？

* {
  margin: 0px;
  padding: 0px;
}
.background {
  background: url("https://static.kent.ac.uk/nexus/ems/50.jpg");
  border: 3px solid black;
  margin: 0 auto;
  width: 100%;
}
.text {
  margin: 0 30px 0 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  height: auto;
}
.text p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
  opacity: 1;
}

Answer 3

这种情况正在发生，因为您在后台课程中提供了border: 3px solid black;，这就是为什么它没有正确显示。

如果你想在顶部和底部使用边框，那么你可以这样做

.background {
  background: url("https://static.kent.ac.uk/nexus/ems/50.jpg");
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  margin: 0 auto;
  width: 100%;
}

所以结论是你必须先从左右移除边框，然后才能得到你想要的结果。

您可以在此处看到差异Codepan

希望这会对你有所帮助

如何才能使其适合屏幕？

3 个答案: