时间戳

首页 > 解决方案 > 通过自定义 CSS 向 Squarespace York 模板添加固定背景 - 移动问题

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

问题描述

我正在尝试使用York模板将固定的背景图像添加到我的 Squarespace 网站。可以在此处查看网站 ( www.newinkmedia.co )。

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

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

桌面截图

手机截图#1

手机截图#2

.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");
}

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

标签： htmlcssmobilebackground-imagesquarespace

解决方案

我的一位开发人员朋友向我指出了以下解决方案。在下面粘贴我修改后的 CSS 以包含和居中。似乎通过 iPhone 7 在移动 Chrome 和 Safari 上运行良好。

.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;
}

推荐阅读