使身體背景適合整個屏幕

這可能是一個非常簡單的問題，但我已經嘗試了所有發佈的解決方案，而且它們都不適合我。使身體背景適合整個屏幕

我只是簡單地將漸變應用於我的<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="https://stackoverflow.com/users/change-password">Change Password</a> 
       <div class="dropdown-divider"></div> 
       <a class="dropdown-item" href="https://stackoverflow.com/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); 
}

來源

2017-06-01 ifengox

分享您的代碼，請。 – Ehsan

我應該發佈我的整個樣式表嗎？ @ehsan – ifengox

非常感謝你 – Ehsan

嘗試添加你的風格在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; 
}

來源

2017-06-01 06:36:44

這就是那個效果：http：//imgur.com/a/UcgjZ（當然我的漸變填充了） – ifengox

查看更新 –

它越來越好了，但漸變還是贏得了'延長：http：//imgur.com/a/J4hU7 – ifengox

您可以將它添加到你的CSS文件的頂部：

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

還有一個名爲「正常化」的CSS庫，應該爲你照顧。

來源

2017-06-01 07:00:46 StuntHacks

Nitoivk，但如果值爲0，則不應提供單位。 – thewolff

這是真的，但出於兼容性的原因，瀏覽器（*咳嗽* IE *咳嗽*）可能只接受'保證金：0;'一半的時間。沒有笑話，但我曾經有一個正常顯示的網站，然後我重新加載它，邊緣在那裏。然後我重新加載它，並在幾次嘗試後，再次正常。 @thewolff – StuntHacks

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尺寸和最小高度

來源

2017-06-01 14:13:14

使身體背景適合整個屏幕

回答

相關問題