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

Question

我正在研究 CSS 中的视口元素，并希望背景是来自 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>

我希望出现背景图像，但没有任何反应。

标签： htmlcss

Answer 1

url不见了！
此外，您必须使用图片网址。不是 unslplash 的那个...

改用这个：

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