Question

我现在有一个奇怪的问题。我写了一个非常简单的网站：

正常显示。但是，当我尝试刷新它时，不是经常，也许是一次刷新10次，背景照片的显示有点像：

我是前端设计的新手，我不知道发生了什么。有人能帮我吗？这是我的html和css代码，这个bug只出现在chrome中，而firefox运行良好。

HTML code：

    <hal format="hidl">
        <name>android.hardware.biometrics.fingerprint</name>
        <transport>hwbinder</transport>
        <impl level="generic"></impl>
        <version>2.1</version>
        <interface>
            <name>IBiometricsFingerprint</name>
            <instance>default</instance>
        </interface>
    </hal>

和后台CSS：

<!doctype html>
<html>

<head>
    <meta charset = "utf8">
    <meta http-equiv="Pragma" content="no-cache">
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='login.css') }}">
    <title> Login page :) </title>
</head>

<body>    
  <div id="div_title">
      <span id="title"> Welcome to wentong's website! </span>
      </br>
      <a href="{{ url_for('homepage') }}" id="guestlink">Entrance for guests here :)</a>
  </div>

  {% for message in get_flashed_messages() %}
    <div class=flash>{{ message }}</div>
  {% endfor %}

  <form action="{{ url_for('login') }}" method=post>
      <div id = "div_login">
          <span class="label">Username:</span>
          <input class="input" type=text name=username>
          <br/>
          <span class="label">Password: </span>
          <input class="input" type=password name=password>
          <br/>
          <input id="submit" type=submit value=Login style="display:none">
      </div>
  </form>
</body>
</html>

Answer 1

您可以尝试将背景图像与单独的img标记放在一起使用css规则：

.full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

并将其放置在布局标记的最底部

<!doctype html>
<html>
<head>
  ...
</head>
<body>
  ...
   <img class="full-screen-background-image" src="you-image.jpg" />  
</body>
</html>

加载背景图片的bug

1 个答案: