CSS 背景位置不适用于移动设备

Question

我在正确定位背景图片时遇到问题。它在桌面上工作，即使我调整 window 的大小以模拟 phone 它也能正确显示，但是当我实际访问我的 phone 网站时（在 Android/Chrome 上测试和 iOS/Safari) 它似乎忽略了背景位置属性.

CSS 问题：

.blur {
        background: 
    /* top, transparent blue, faked with gradient */ 
    linear-gradient(
      rgba(43, 43, 43, 0.1), 
        rgba(43, 43, 43, 0.1)
    ),
    /* bottom, image */
    /* BACKGROUND IMAGE */
    url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg');
  background-attachment: fixed;
  background-position: -350px -150px;
  background-position-x: -350px;
  background-position-y: -150px;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #2b2b2b;
  overflow: auto;
}

@media (min-width: 40em) {

.blur {
      background: 
    /* top, transparent blue, faked with gradient */ 
    linear-gradient(
      rgba(43, 43, 43, 0.1), 
      rgba(43, 43, 43, 0.1)
    ),
    /* bottom, image */
    /* BACKGROUND IMAGE */
    url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg');
  background-attachment: fixed;
  background-position: -350px 0; 
  background-size: cover;
  background-repeat: none;
  }

@media (min-width: 50em) {

  .blur {
  background: 
      /* top, transparent blue, faked with gradient */ 
      linear-gradient(to right,
        rgba(43, 43, 43, 0.1), 
        rgba(43, 43, 43, 0.1)
      ),
      /* bottom, image */
      /* BACKGROUND IMAGE */
      url('https://suzannecowan.ca/wp-content/uploads/2016/04/2015-10-20-macleans-2-1.jpg');
    background-attachment: fixed;
    background-position: -250px 0; 
    background-size: cover;
    background-repeat: none;
    }

我搜索了解决方案并找到了两个对过去帮助过人们的建议：添加 background-position-x 和 background-position-y 但没有帮助，以及将背景图像移出 body 并放入另一个容器（在本例中为 .blur），这也没有帮助。

网址是：https://suzannecowan.ca/.

提前感谢您提供的任何建议。

Answer 1

在Android/Chrome中，正在定位背景。如果更改值，它会移动图像。您也可以通过 Chrome（移动）网络调试器进行确认。

mobile/desktop 的区别在于两者处理这些长度单位的方式不同。

Answer 2

将您的背景图像设置为 cover 意味着它会想要拉伸到屏幕的高度，这意味着在小型设备上您会看到它的一个非常狭窄的视图。就个人而言，我要么将图像调整得更高更薄，以便它更适合移动屏幕，要么将背景大小设置为 100% auto，恕我直言，这看起来很不错。

CSS 背景位置不适用于移动设备

CSS Background-position not working on mobile

html

css

responsive-design

background-image

background-position