Question

这可能是一个非常简单的问题，但我已经尝试了所有发布的解决方案，但似乎没有一个对我有用。

我只想将应用于<body> HTML标记的渐变设置为始终正确适合屏幕。每当我以较小的分辨率查看浏览器，并尝试滚动时，背景就会出现。

此外，如果我关闭背景重复，它只会被白色填充。

这是我的base.html：

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}</title>
    <link rel="shortcut icon" href="{% static 'assets/favicon.png' %}"/>
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
    <link href="{% static 'css/bootstrap-social.css' %}" rel="stylesheet">
    <link href="{% static 'base.css' %}" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Aladin" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
    {% block head-extras %}{% endblock %}
  </head>
  <body>
    <nav class="navbar navbar-toggleable-md bg-white">
      <div class="container">
        <a href="/home" class="navbar-brand">
          <h1 id="logo" class="nav-wel">Pomodoro</h1>
        </a>
        {% if request.user.is_authenticated %}
          <div class="status">Balance:&nbsp;{{ request.user.profile.coins }}<img class="coin-img" src="{% static 'assets/coin.png' %}" height="40px" width="auto"></div>
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle welcome nav-wel" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" id="welcome">Welcome {{ user.get_username }}</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="/shop">Shop</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/leaderboard">Leaderboard</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/users/change-password">Change Password</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/users/logout">Logout</a>
              </div>
            </li>
          </ul>
        {% endif %}
      </div>
    </nav>
    {% block content %}
    {% endblock %}
    <script src="{% static 'js/jquery-3.2.1.js' %}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
    <script src="{% static 'js/pomodoro.js' %}"></script>
  </body>
</html>

和css：

body {
  background: #c2e59c;
  background: -webkit-linear-gradient(to right, #c2e59c, #64b3f4);
  background: linear-gradient(to right, #c2e59c, #64b3f4);
}

Answer 1

尝试在html标签中添加您的样式：

html {
height: 100%;
background: #222d69;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;    
background-repeat:no-repeat;
background: -webkit-linear-gradient( to left top, blue, red);
background: -moz-linear-gradient( to left top, blue, red);
background: -ms-linear-gradient( to left top, blue, red);
background: -o-linear-gradient( to left top, blue, red);
background: linear-gradient( to left top, blue, red);
}

https://jsfiddle.net/emilvr/qqdg9654/

更新：

只需添加此项，您的身体背景和背景颜色应重置：

body{
   background:none;  
   background-color:none;
}

Answer 2

您可以将其添加到css文件的顶部：

html, body {
    padding:0px;
    margin:0px;
}

还有一个名为“normalize”的css库，应该为你处理。

Answer 3

body {
 margin: 0;
 min-height: 100vh;
 background: #c2e59c;
 background: -webkit-linear-gradient(to right, #c2e59c, #64b3f4);
 background: linear-gradient(to right, #c2e59c, #64b3f4);
 background-size: fixed;
}

尝试使用bg大小和最小高度

使身体背景适合整个屏幕

3 个答案: