手机上的背景图片看起来很奇怪

Question

当我检查我的网站的移动版本时，在桌面上并将宽度更改为移动设备时，主页图像看起来不错，但是，当我在真实的移动设备上时，图像看起来很奇怪, 太大了。

检查时的外观：

在真实移动设备上的外观：

主页代码如下：

#hero {
  width: 100%;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  background: url("../img/mobilebg.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-animation:linear infinite alternate;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
  z-index: 3;
}

  <!-- ======= Hero Section ======= -->
  <section id="hero" class="d-flex flex-column justify-content-center">
    <div class="container" data-aos="zoom-in" data-aos-delay="100">
  </section><!-- End Hero -->

我该如何解决这个问题？感谢任何帮助，谢谢

P.S: 站点是helpsavetheseas.com

Answer 1

尝试将#hero身高的测量单位改为px或em而不是vh E.: 从后台删除值fixed 属性 => #hero{height:150em ; background: url(../img/mobilebg.png) no-repeat center center;}

手机上的背景图片看起来很奇怪

Background image on mobile looks weird

html

css

mobile

mobile-website