html - 如何在 HTML/CSS 中将图像定位在文本背景中

Question

我正在处理 CSS 中的视口(viewport)元素，并希望背景是来自 unsplash.com 网站的图像

我试过来自在线网站的图片，它不适用于背景图片，但本地计算机运行良好

header {
  background: #333 ('https://unsplash.com/photos/0J3_p-xc9s8');
  color: white;
  line-height: 1.7em;
  height: 100vh;
  padding: 2rem;
}

<header>
  <h1>Welcome to my Website</h1>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime officiis eveniet possimus saepe, deleniti neque?</p>
  <a href="#" class="btn">see more</a>
</header>

我希望出现背景图片，但什么也没发生。

Answer 1

url 丢失了!
另外，您必须使用图片网址。不是 unslplash 的...

改用这个:

背景:#333 url('https://images.unsplash.com/photo-1569255726521-d2e663a80283?ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80');