Question

我尝试使用York模板向我的Squarespace网站添加固定背景图片。可在此处查看网站（www.newinkmedia.co）。

开箱即用，York模板不支持固定的背景图像，因此我会使用自定义CSS路径。我想在用户滚动时将背景图像居中，包含和修复。一切似乎在桌面上都很好，但在移动设备上遇到了一些问题，图像被放大而不是固定。

下面的屏幕截图和自定义CSS：

.overflow-wrapper {
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #ffffff;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    background-image: url("https://static1.squarespace.com/static/5ac6c7bd5417fc86faa1ce9d/t/5acd6b972b6a28a577ff7603/1523411863575/newink_concept_v2ai-09.jpg");
}

让我知道你的想法。非常感谢帮助。

Answer 1

我的一位开发者朋友向我指出了以下solution。将我修改后的CSS粘贴到下面以包含＆amp;中央。似乎通过iPhone 7在移动Chrome和Safari上正常运行。

＆＃13;

.overflow-wrapper {
    -webkit-transition: background-color 100ms linear;
    -moz-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    -o-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
    overflow-x: hidden;
    overflow-y: auto;
}

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: url(https://static1.squarespace.com/static/5ac6c7bd5417fc86faa1ce9d/t/5acd6b972b6a28a577ff7603/1523411863575/newink_concept_v2ai-09.jpg) no-repeat center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

＆＃13;

通过自定义CSS向Squarespace York模板添加固定背景 - 移动问题

1 个答案: