Question

我正在创建一个网站，在该网站中需要一整页的响应式背景图片才能在所有设备上显示。我已经在Photoshop中创建了这张图片，它是2560 x 1440（16：9）。

我在图像的顶部，底部，左侧和右侧周围都带有白色边框，与紫色背景形成了鲜明的对比，以便更轻松地查看正在发生的情况。

由于某些原因，在使用下面的代码时，图像的顶部和底部（白色边框）被切除。

当我使用检查元素并将视口设置为1920 x 1080等时，此问题消失了。

我的显示器设置为1920 x 1080分辨率，我使用的是Opera浏览器，尽管该浏览器也在IE中进行了测试。

这是正在发生的事情的图像-https://gyazo.com/fb5d44dfd5332e42f1406e1f427dbd4a

顶部和底部应该有相等宽度的白色边框，但是由于某些原因，没有。

任何人和所有帮助表示赞赏。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <link rel="stylesheet" href="css/styles.css">
    <title>Hello, world!</title>
  </head>
  <body>
  </body>
</html>

html { 
background: url(../media/placeholder.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 1

这是因为您使用的是background-size: cover，它正在做应有的工作。无论如何调整大小，它都会100％“覆盖”元素周围没有任何“空”空间，并且可能会切断内容。

尝试改用background-size: contain，这可能是您想要的更多内容。图像的100％总是可见的，但可能会在周围留一些空白。

这是每个background-size选项及其外观的很好的演示 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

仅供参考，您无需为此功能it's pretty well supported包括不同的供应商前缀（-o-*，-moz-*和-webkit-*）（当然，除非需要以支持IE8，Firefox 3等）

整页背景图像被切掉顶部和底部

1 个答案: