Question

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

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

原始图片为：Original Image

结果是：Resultent Image

不同之处在于我的网页背景比原版更大。

任何帮助将不胜感激!!!

Answer 1

您所要做的就是删除background-size: cover，
那一切都应该没问题。

Answer 2

尝试删除background-size:cover;＆amp;根据您的要求设置图像宽度。 background-size:cover;将图像拉伸到完整背景。

或

请将您的图片扩展名从.png更改为.jpeg或.jpg，因为.png始终会拉伸您的图片，之后您之前定义的css属性将正常工作。

Answer 3

您有很多关于背景图片和尺寸的选项。根据您的需要，您可以查看此W3c并尝试使用您可以应用的不同选项。

请记住，由于您将CSS应用于您的正文，因此您的所有网页都会“遵循”这些规则。但是您的某些页面可能与其他页面的高度不同。

结果还取决于客户端的屏幕分辨率。您必须在所有屏幕分辨率中确定所需的结果。

Answer 4

你可以做的只是删除，background-size:cover; 现在让我们看看这意味着什么，

background-size

因为background-size CSS属性指定了大小背景图片。图像的大小可以完全约束或仅部分是为了保持其内在比例。
cover

与contain（ contain值相反的关键字指定无论包含框的大小如何，都应缩放背景图像，以使每个边都与可能的同时不超过容器相应侧面的长度。 cover将图片缩放为大图尽可能保持图像宽高比（图像不会得到压扁）。图像＆＃34;覆盖＆＃34;整个width或height 容器。当图像和容器具有不同的尺寸时，图像被剪切为左/右或上/下。

要获得更多识别，请尝试JSFiddle

有关background-size:

的更多参考资料

Answer 5

删除background-size：cover;

Answer 6

感谢。

我发现了问题。源图像以35％的缩放率打开，因此当我设置背景时，它会拉伸到100％。

  body {
  margin: 0;
  background-image: url(background.png);
  background-size: 60% 60%;
  background-position: center center;
  }

Answer 7

试试这个：

.your-class {
   background-image: url(background.png);
   /* Required Height */
   height: 800px; 

   /* Center and scale the image nicely */
   background-position: center  !important;
   background-repeat: no-repeat   !important;
   background-size: cover   !important;
}

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

7 个答案: