Question

我有一个基本的HTML页面，其中包含一个div：容器。我正在使用背景图像来覆盖页面的整个宽度。但是，图像不会覆盖整个页面，而是在顶部，底部，左侧和右侧周围留有空白。

此外，我使用Container :: After添加了一个叠加层，但它也不能覆盖整个图像-它也留有边距。

我尝试过的解决方案：

做一些研究，我发现HTML使用内联显示元素。因此，我尝试将显示更改为flex。此外，我什至尝试将容器向左浮动。但是，没有任何效果。唯一有效的方法是在容器中添加负边距，并删除了空白。但是，当我添加h2元素时-空格又回来了。

我不确定这里发生了什么？任何建议都很好。以下是我的jsfiddle： https://jsfiddle.net/fun_code11/zcqm1w5u/2/

.container{
  background-image: url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  height: 600px;
  margin-top: -10px;
  margin-left: -10px;
  margin-right: -10px;
}


.container::after{
  content: " ";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

Answer 1

您应该从h2中删除上边距。这导致空白。您可以像h2 { margin-top:0 }

为什么我的覆盖图和图像不能覆盖整个页面？

1 个答案: