Question

我有一个严重的问题。我还没有找到解决方案，所以我希望你知道。

我在做网站。我需要制作响应式封面背景图片。（涵盖整页）。我开始时：

/* Location of the image */
  background-image: url(main.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;

这个代码正常工作，即使我调整窗口大小等等。所以它非常好。但问题出现在高度分辨率屏幕上，如iPad或iPhone。在那里，图像非常非常放大，有点像素或没有聚焦。我想，这是因为图像分辨率低，但比我意识到的那样，图像接近5K。我想让它像this site

一样响应

任何帮助都很好，需要快速解决！

由于

Answer 1

您可以在CSS中创建媒体查询，以便在视网膜显示器（或其他高分辨率屏幕）上手动配置背景图像。

请参阅CSS-tricks。

Mediaquery视网膜显示：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }

更强烈的证据：

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { ... }

问题：

另请参阅this post了解相同的问题/答案。

Answer 2

这是因为你正在使用background-attachment：fixed - 无论出于何种原因，当使用background-size：iOS上的封面会导致此行为。因此，如果添加以下内容，则应解决：

/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
    header {
      -webkit-background-size: auto 150%;
      background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {

    header {
      -webkit-background-size: 150% auto;
      background-attachment: scroll;
    }
}

来自here on SO的解决方案。

根据高密度显示器设置封面图像

2 个答案: