html - <div> 中的背景图片仅使用 CSS

Question

我是 HTML/CSS 的新手，这只是一个测试页面。我有一个包含一个人的图像的 div，我想在他的图像旁边添加他的引述，但我无法修复图像以填充整个 div 的宽度和高度。你能帮我么! 附言我还不知道如何使用脚本，所以是否可以只使用 CSS 来实现它，还是我应该暂时保留它？

<div id="napoleon">
    <img src="images/napoleon.jpg" />
</div>
<div>
    <q>If you can see it and you can believe it, you can do it.</q>
    <p>Napoleon Hill</p>
</div>

Answer 1

你可以用 CSS 做到这一点!

#napoleon {
  background-image: url('images/napoleon.jpg');
  background-size: cover; /* this makes the image fill the container */
  background-position: center;
}

只需确保调整图片的 URL，并从 div 中删除图片。