Question

我在网上找到了用于动画彩虹背景的css，它在PC上效果不错，但在移动设备上却被截断了，看起来并不好

.wrapper { 
  height: 100%;
  width: auto;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 2000% 2000%;
background-attachment: fixed;

-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite;
}

@-webkit-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}

这是我手机上的样子full page view

View when it first loads

edit：第一次加载时，背景占据了整个屏幕，但是我可以滚动浏览，并且恰好停在屏幕边缘。而且，我只是被一个名为wrapper的div类中的身体所包围

Answer 1

这看起来好像不是CSS的问题。这看起来更像是具有类wrapper的元素的问题。该元素可能不会延伸到占据页面的整个宽度。

有多种方法可以确保元素占用页面的整个宽度。您可以尝试以下操作：

.wrapper {
    width: 100vw;
}

我希望这会有所帮助。

动画背景无法在手机上使用

1 个答案: