使用CSS设置背景图像而不拉伸图像

Question

我试图使用CSS设置背景图像，但原始图像被拉伸。如何保持原始图像大小，同时设置整个页面的背景？

 body {
  margin: 0;
  background-image: url(background.png);
  background-size: cover;
  background-repeat:   no-repeat;
  background-position: center center;
}

原始图像为：原始图像

结果是：结果图像

不同的是我的网页背景比原来的要大。

任何帮助都将不胜感激！！！

Answer 1

尝试删除背景尺寸：封面

或

请从更改图像扩展名。png到。jpeg或。jpg因为。png总是拉伸你的图像，然后你之前定义的css属性就会正常工作。

Answer 2

关于背景图像和大小，您有很多选择。根据您的需要，您可以检查此W3c并尝试可以应用的不同选项。

请记住，既然您将CSS应用于身体，那么您的所有页面都将“遵循”这些规则。但是您的一些页面可能与其他页面的高度不同。

结果也取决于客户端的屏幕分辨率。您必须确定所有屏幕分辨率中您想要的结果。

Answer 3

你所要做的就是去掉背景尺寸：封面，然后一切都会好起来。