safary 和移动浏览器，不支持全背景图片

Question

我正在为我的客户制作一个网站。

现在，该网站的登录页面上有背景图片，在所有 PC 浏览器中看起来都非常漂亮，但有一个问题......

如果您不使用谷歌浏览器，在所有平板电脑和手机上，它会使背景图像看起来非常放大，而且很奇怪。

有代码（css background-image，应该是响应式的，但是很多浏览器没有）：

body {
  height: 100%;
    font-family: 'Open Sans';
    font-weight:100;
    color:#666666;
    line-height: 1.7em;
    /* Location of the image */
  background-image: url(1.jpg);

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;

  /* Background image doesn't tile */
  background-repeat: no-repeat;

  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;

  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;
}

Link to the website

Answer 1

很遗憾，background-attachment: fixed 和 background-size: cover 不能很好地协同工作。

请参阅this question 及其最高投票答案。 （以防万一这个问题将来可能不存在，这里是答案）

不幸的是，这只是一个如何固定定位的神器 在 CSS 中工作，在纯 CSS 中没有办法解决它 - 你必须 使用 Javascript。

发生这种情况的原因是由于 background-attachment: fixed 和 background-size: cover. 当你 指定background-attachment: fixed 它本质上会导致 background-image 表现得好像它是一个位置：固定图像， 意味着它已脱离页面流和定位上下文 并且相对于视口而不是它所在的元素 的背景图片。

因此，无论何时将这些属性一起使用，cover 值都是 相对于视口的大小计算，与 元素本身的大小，这就是为什么它在 该元素与视口大小相同，但被裁剪 当元素小于视口时的意外方式。

要解决这个问题，您基本上需要使用 background-attachment: scroll 并将事件侦听器绑定到 JS 中的 scroll 事件 手动更新背景位置相对于多远 窗口已滚动以模拟固定定位，但 仍然相对于容器计算background-size: cover 元素而不是视口。

Answer 2

因为手机通常握在手掌中，其最大长度是垂直的（不像台式电脑，它们的长度大多是水平的），使用background-size: cover; 可能会将您的图像暴露为低分辨率图像。

如果必须放大图像以“覆盖”您的浏览器窗口，则可能需要对图像进行像素化处理，尤其是在设备像素密度非常高的情况下。

这张图片说明了这个问题：

解决此问题的方法是提高图像的分辨率。

请注意，如果您想要的背景图片是自然风景，则该问题将最为突出。如果是人像，你可能会发现这个问题的极端情况是相反的。