html - 不调整大小的全尺寸背景

Question

我现在面临这个问题已经有一段时间了，已经尝试了 n 种选择，但仍然没有运气。我有这个背景图片:

我想把它作为我网站的背景。我将它添加为全尺寸背景，但我不知道为什么它总是调整大小并变成这样。

这是我的背景图片的 CSS 代码。

body
{
  background: url('../images/home.jpg') no-repeat   center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;
}

我真的不确定如何解决这个问题!请以正确的方式指导我。

Answer 1

CSS3 中的 background-size: cover 属性可拉伸(stretch)您的图像以适合您指定元素的背景，在本例中为您的 body 。

编辑: 正如其他人提到的，使用 background-size: contain 会给你最理想的结果，因为它由以下定义:

包含
该关键字指定背景图片在保证其两个尺寸小于或等于背景定位区域对应尺寸的情况下，尽可能放大。

下面的链接还有其他属性，可以为您提供所需的结果:来源:https://developer.mozilla.org/en-US/docs/Web/CSS/background-size