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-attachment: scroll并将事件侦听器绑定到JS中的scroll事件。   手动更新相对于多远的背景位置   窗口已滚动，以模拟固定定位但   仍然相对于容器计算background-size: cover   元素而不是视口。

Answer 2

由于手机通常垂直放置在手掌中（与台式电脑的长度大致水平不同），使用background-size: cover;可能会将图像曝光为低分辨率图像。< / p>

如果图片必须按比例放大以覆盖＆＃39;在您的浏览器窗口中，可能需要对图像进行像素化，尤其是在设备具有非常高的像素密度的情况下。

此图片演示了此问题：

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

请注意，如果您所需的背景图像本质上是景观，则问题最为突出。如果它是肖像，你可能会发现这个问题的极端可以逆转。

安全和移动浏览器，不支持全背景图像

2 个答案: