CSS背景位置在移动设备上不起作用答案

【问题标题】：CSS Background-position not working on mobileCSS背景位置在移动设备上不起作用
【发布时间】：2016-07-29 05:12:46
【问题描述】：

我在正确定位背景图片时遇到问题。它可以在桌面上运行，即使我调整窗口大小以模拟手机，它也能正确显示，但是当我实际访问手机上的网站（在 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/。

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

【问题讨论】：

您是否尝试过为@media (min-width: ) 使用像素量？我从未见过 em 用于此目的。
@theblindprophet 我一直使用em，之前从未遇到过问题，但我按照您的建议更改了它，没有任何区别。
特别令人沮丧的是，我在 shaun-francis.com 上使用了相同的技术并且效果很好，所以我现在不知道自己做错了什么。
我不知道你是否喜欢额外的工作因素，但我有一个 100% 工作的资源：@987654322@
移除背景尺寸：封面属性

标签： html css responsive-design background-image background-position

【解决方案1】：

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

【讨论】：

谢谢！这行得通。我更改了背景大小并删除了仅适用于移动设备的背景定位，它工作正常。需要注意的是，如果我需要背景图像填满整个屏幕（这就是我使用 cover 的原因），这个解决方案将不起作用，但因为在这种情况下，如果图片没有填满并不重要整个屏幕纵向，此解决方案将起作用。
酷。我今天还刚刚读到“您不能在 ios 中同时使用 background-attachment fixed 和 background-size:cover ，因为图像将延伸到整个内容而不仅仅是视口（这是 ios 的长期问题）。”所以你还在那里解决了一个实际的错误。

【解决方案2】：

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

移动/桌面之间的区别在于两者处理这些长度单位的方式不同。

【讨论】：