Question

我有一个带有一点动画的全屏背景图像（放大和缩小）。它在大多数浏览器中运行良好，除了safari。背景图像甚至没有显示。我认为它与绝对定位有关？

代码：

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.background {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  position: fixed;
  background: url(https://lorempixel.com/500/500/) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  -webkit-animation: zoom 9s infinite;
  animation: zoom 9s infinite;
}

@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@keyframes zoom {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

<body>
  <div class="background">
    <div class="image">
    </div>
  </div>
  <div class="flex-container">
  </div>
</body>

非常感谢！

编辑：

在检查了我的代码之后，结果发现这是.background类的绝对定位是有罪的...... 我编辑了这样的代码，一切都在safari中运行：

HTML：

<body>
    <div class="background">
    </div>
    <div class="flex-container">
    </div>
</body>

CSS：

.background {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
  background: url(../assets/background-large.jpg) no-repeat center center;
  background-size: cover;
  -webkit-animation: zoom 90s infinite;
   animation: zoom 90s infinite;
}

@-webkit-keyframes zoom {
0% { -webkit-transform:scale(1,1); transform:scale(1,1); }
50% { -webkit-transform:scale(1.2,1.2); transform:scale(1.2,1.2); }
100% {-webkit-transform:scale(1,1);transform:scale(1,1); }
}
@keyframes zoom {
0% { -webkit-transform:scale(1,1); transform:scale(1,1); }
50% { -webkit-transform:scale(1.2,1.2); transform:scale(1.2,1.2); }
100% {-webkit-transform:scale(1,1);transform:scale(1,1); }
}

Answer 1

您可以使用 img 标记来避免此问题，请尝试以下代码：

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.background {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  overflow: hidden;
}

.image {
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  -webkit-animation: zoom 9s infinite;
  animation: zoom 9s infinite;
}

@media screen and (max-width: 1024px) {
  .image {
    left: 50%;
    margin-left: -512px;
  }
}

@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@keyframes zoom {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

<body>
  <div class="background">
    <img src="https://lorempixel.com/500/500/" class="image"/>
  </div>
  <div class="flex-container">
  </div>
</body>

不显示在徒步旅行队的生气蓬勃的背景图象

1 个答案: