Question

我是Web开发的初学者，我正在创建自己的网站。可以在这里访问该网站

https://www.shafirpl.com/

问题是当我在iPhone（包括chrome和safari）上或在台式机环境（例如MacBook）中加载页面时，背景图片显示了。但是，在android手机（已通过像素xl和Samsung galaxy s8 +测试）上，背景图像不会显示。更为奇怪的是，我在iPhone 7 plus中使用了chrome，其中背景图片可以完美加载，但是在像素xl上使用相同的chrome浏览器不会加载背景图片。

我已经包含了HTML和CSS代码的相关部分。该网站使用快递服务器（节点js）进行服务，我使用了引导程序以及我自己的CSS

 body{
  background: url(/images/image3.jpg);
  background-size: cover;
  background-position: center;
  font-family: 'Lato', sans-serif;
  color: orange;

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shafi</title>

    <!-- This is the google font lato -->
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

    <!-- Bootstrap Cdn -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



    <!-- This is our own style sheet, we are adding it after bootstrap so that
    it has highest precedence compared to bootstrap, remember
    in css, the one comes late has more precedence -->
    <link rel="stylesheet" href="/stylesheets/homepage.css">

    <!-- Fontawesome cdn -->
    <link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet">

  </head>

  <body>

    <!-- The navbar -->
    <nav class="navbar navbar-inverse">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Shafi</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <!-- This active class will make the home appear highlighted or active -->
        <li class="active"><a href="/">Home</a></li>
        <li><a href="/about">About Me</a></li>
        <li><a href="/experience">Work Experience</a></li>
        <li><a href="/protfolio">Protfolio</a></li>
        <li><a href="/education">Education</a></li>

      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/resume" target="_blank"><i class="fas fa-file"></i> My Resume </a></li>
        <li><a href="/contact"><i class="fas fa-envelope"></i> Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>



    <!-- This is for the background image -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12">

          <!-- Centering everything with this div -->
            <div id="content">
              <h1>Hello World! This Is Shafi</h1>
              <h3 class="bolder">Student & Passionate Software Engineer</h3>
              <hr>
              <a href="/about"><button type="button" name="button" class="btn btn-default btn-lg" href="/about"><i class="fa fa-laptop-code"></i> About Me</button></a>

            </div>
        </div>
      </div>
    </div>

    <% include ../partials/footer.ejs %>

谢谢

Answer 1

在您的网址中使用引号：

 body{
  background: url('/images/image3.jpg'); 
  background-size: cover;
  background-position: center;
  font-family: 'Lato', sans-serif;
  color: orange;
 }

Answer 2

在reddit中发布了相同的问题后，有人友好地指出了background-size: cover；是罪魁祸首。他/他建议将此行添加到我的CSS

background-repeat: no-repeat;

解决了该问题。

Reddit链接在这里

https://www.reddit.com/r/learnprogramming/comments/9az8fy/css_background_image_not_showing_up_in_android/?utm_content=full_comments&utm_medium=message&utm_source=reddit&utm_name=frontpage

感谢您的帮助。

Answer 3

虽然问题似乎已经解决，但我认为值得一提。花了我两天的时间（不适用于仅Android浏览器）后，事实证明是由于我将背景图像应用于flex box child。在目标内有另一个孩子（现在这个内部元素具有背景图像）并使它们的宽度100％解决了我的问题。尽管可能与问题无关，但我希望这可以对遇到相同问题的人有所帮助。有人指出，关于Android浏览器上的另一个问题，背景重复：不重复也能解决问题。

CSS背景图片未在Android设备中显示

3 个答案: