html - 你如何在 css 中调整背景图像的大小？

Question

下面是我的代码。我不知道如何在一整行代码中调整图像的大小。我是否创建新的代码行并使用标签？我不知道该怎么办。有什么问题吗？

#centerpicture {
  min-height: 400px;
  background: url("Enderman_wallpaper.jpg") no-repeat;
  text-align: center;
  color: #ffffff;
}

只显示了 Sprite 的一只眼睛，但它应该显示为 Sprite 的整张脸。

Answer 1

您可以使用以下属性之一来调整背景图片的大小:

background-size: cover; 
background-size: contain;
background-size: 30%; //using percentages
background-size: 100px 200px // using pixels

试用这些属性，看看哪个最适合您。请引用documentation获取更多信息。

要定位背景图片，请使用 background-position属性(property)。

代码风格:

您可以在单独的行中声明 background 属性，或使用 shorthand syntax :

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

在你的情况下，你可以使用这个:

background: url('Enderman_wallpaper.jpg') 0%/30% no-repeat;