0

我试图让图像“desk.png”成为我在单个网页上的背景，没有滚动。我希望它完全适合网络浏览器。截至目前，我有：

body {
    background-image: url(desk.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

此时图像的上半部分被切断。当我尝试其他东西时，它已经切断了底部的很大一部分。我希望能够调整它的大小并保持良好的分辨率而不切断任何东西。

4

4 回答 4

1

正如已经指出的，您可以使用该background-size属性以多种方式执行此操作。

选项 1：在不考虑纵横比的情况下调整大小（正如@Danko 指出的那样）：

background-size: 100%;

选项2：调整大小，使图像至少与身体一样大（正如@Zsigoveny 指出的那样）：

background-size: cover;

选项 3：调整大小，使图像在元素内尽可能大：

background-size: contain;

这些都是有效的选项，它只取决于你想要什么。

您可以在背景尺寸文档中找到更多信息，cover并且有一篇关于完美全页背景图像的精彩文章，您可能会喜欢。contain

于 2013-11-08T17:23:12.687 回答
1

您可以使用：

body {
  background-size:100% 100%;
}

查看演示http://jsfiddle.net/5k9eH/7/

于 2013-11-08T16:04:07.043 回答
0

你可以做 ：

body{
    background-size:cover;
}
于 2013-11-08T16:12:18.530 回答
0

您可以使用：

body {
  background-image: url(desk.jpg);
  background-repeat:repeat;
  background-position:center;
  height:100%;
  width:100%;
}
于 2013-11-08T16:12:49.637 回答