CSS中带有伪元素的背景图像

Question

我得到了以下代码：

 .container { color: white; height: 80vh; margin: 10vh 0 0 25vw; position: relative; width: 50vw; } .container::after { content: ""; background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg'); background-position: center; background-size: cover; filter: brightness(.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .container_inside { align-items: center; display: flex; flex-direction: column; font-size: 1.5em; height: calc(100% - 4em); justify-content: center; padding: 2em; text-align: center; width: calc(100% - 4em); } .small { color: #e9e9e9; font-size: .7em; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The background</title> </head> <body> <div class="container"> <div class="container_inside"> <p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p> <p class="small">Martin Fowler</p> </div> </div> </body> </html>

这里有两个目标：

1. 使它与::after而不是::before
2. CSS 中某处缺少一行代码，它的缺失会破坏一切。 将缺少的属性添加到正确的位置，使其看起来像预期的那样。

我找到了丢失的代码行（ content: ""; ），并将::before替换为::after ，这是我得到的地方：

.container::after {
  content: "";
  background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
  background-position: center;
  background-size: cover;
  filter: brightness(.5);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
}

我正在努力让背景图像扩展到它的全尺寸，否则任务就解决了。 代码编辑器告诉我任务 2 是正确的，但由于某种原因任务 1 未被接受，我认为它与图像大小有关，但我可能是错的。

理想情况下它应该是这样的： https : //ucarecdn.com/d24c1329-c0a3-4bd6-948c-5cfd83466c86/

超级感谢任何帮助！

Answer 1

尝试使用它，与.container {width: 50vw;}

.container::after {
  content: '';
  background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
  background-position: center;
  background-size: cover;
  filter: brightness(0.5);
  position: absolute;
  top: 50%; /* changed */
  left: 50%; /* changed */
  bottom: 0; /* added */
  right: 0; /* added */
  width: 100vw; /* changed */
  height: 100vh; /* changed */
  transform: translate(-50%, -50%); /* added */
  z-index: -1;
}

结果：

 * { margin: 0; /* added */ padding: 0; /* added */ box-sizing: border-box; /* added */ } .container { color: white; height: 80vh; margin: 10vh 0 0 25vw; position: relative; width: 50vw; } .container::after { content: ''; background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg'); background-position: center; background-size: cover; filter: brightness(0.5); position: absolute; top: 50%; /* changed */ left: 50%; /* changed */ bottom: 0; /* added */ right: 0; /* added */ width: calc(100vw - 30px); /* changed 3 times */ height: calc(100vh - 30px); /* changed 2 times */ transform: translate(-50%, -50%); /* added */ z-index: -1; } .container_inside { align-items: center; display: flex; flex-direction: column; font-size: 1.5em; height: 100%; /* changed */ justify-content: center; padding: 2em; text-align: center; width: 100%; /* changed */ } .small { color: #e9e9e9; font-size: 0.7em; }

 <div class="container"> <div class="container_inside"> <p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p> <p class="small">Martin Fowler</p> </div> </div>

Answer 2

正如Mihai T指出的，问题在于width 。 我只是从第一个容器中删除了width ，它解决了问题。

最终解决方案

 .container { color: white; height: 80vh; margin: 10vh 0 0 25vw; position: relative; } .container::after { content: ""; background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg'); background-position: center; background-size: cover; filter: brightness(.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .container_inside { align-items: center; display: flex; flex-direction: column; font-size: 1.5em; height: calc(100% - 4em); justify-content: center; padding: 2em; text-align: center; width: calc(100% - 4em); } .small { color: #e9e9e9; font-size: .7em; }

 <div class="container"> <div class="container_inside"> <p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p> <p class="small">Martin Fowler</p> </div> </div>