堆棧內存溢出
  簡體   English   中英

html背景自定義顏色不覆蓋整個頁面

[英]html background custom color not cover the whole page

 原文  2022-06-08 01:46:03  7   5    html/ css

問題描述

我試圖讓這種自定義顏色覆蓋整個頁面，但它只覆蓋其中的一部分。 我對具有類似布局的其他頁面也有同樣的問題。 我知道我需要將我的樣式移動到一個 CSS 文件，但現在，我只是在測試。 我查看了其他解決方案，但還沒有找到對我有幫助的解決方案。 也許是因為我用的是百里香，不確定！！！！

在此處輸入圖像描述

**這是我的HTML代碼**

<!DOCTYPE html>
<html xmlns:sec="https://www.thymleaf.org/thymeleaf-extras-springsecurity5" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1">
<title>VoiceIt App</title>

<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<style>
.navbar {
    background-color: black;
}
#multi-color-bg {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png),
      url(bubbles.png),
      linear-gradient(to right, rgb(132, 208, 191), rgb(153, 132, 208));
  background-repeat: no-repeat,
      no-repeat,
      no-repeat;
  background-position: bottom right,
      left,
      right;
}
</style>

<body id="multi-color-bg">

    <!-- create navigation bar ( header) -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
                    <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="#" th:href="@{/register}">Registration and
                    Login</a>
            </div>
        </div>
    </nav>

    <br><br><br><br><br><br><br>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">

                <h1>User Login Page</h1>
                <form th:action="@{/login}" method="post">

                    <!-- error message -->
                    <div th:if="${param.error}">
                        <div class="alert alert-danger">Invalid username or
                            password.</div>
                    </div>

                    <!-- logout message -->
                    <div th:if="${param.logout}">
                        <div class="alert alert-info">You have been logged out.</div>
                    </div>

                    <div class="form-group">
                        <label for="username"> Username </label> : <input type="text"
                            class="form-control" id="username" name="username"
                            placeholder="Enter Email ID" autofocus="autofocus">
                    </div>

                    <div class="form-group">
                        <label for="password">Password</label>: <input type="password"
                            id="password" name="password" class="form-control"
                            placeholder="Enter Password" />
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-sm-6 col-sm-offset-3">
                                <input type="submit" name="login-submit" id="login-submit"
                                    class="form-control btn btn-primary" value="Log In" />
                            </div>
                        </div>
                    </div>
                </form>
                <div class="form-group">
                    <span>New user? <a href="/" th:href="@{/register}">Register
                            here</a></span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

5 個解決方案

解決方案1
 1 已采納  2022-06-08 01:54:53

您可以嘗試設置高度100%和 css html { height: 100% }

html, body{
   height: 100%;
}

解決方案2
 1  2022-06-08 05:24:28

在這種情況下，您需要調整添加到 HTML 中的自定義#multi-color-bg id 規則中給定的 body 標記的高度。 添加 100% 就可以了，盡管我建議使用單獨的 div 作為正文所有內容的包裝器，並將正文分開，只有 100vh 規則到正文標記。 這當然是可選的，只是一個額外的建議，朋友。 

 .navbar { background-color: black; } #multi-color-bg { width: 100%; height: 100%; background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgb(132, 208, 191), rgb(153, 132, 208)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; }
 <!DOCTYPE html> <html xmlns:sec="https://www.thymleaf.org/thymeleaf-extras-springsecurity5" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="ISO-8859-1"> <title>VoiceIt App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <body id="multi-color-bg"> <!-- create navigation bar ( header) --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#" th:href="@{/register}">Registration and Login</a> </div> </div> </nav> <br><br><br><br><br><br><br> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1>User Login Page</h1> <form th:action="@{/login}" method="post"> <!-- error message --> <div th:if="${param.error}"> <div class="alert alert-danger">Invalid username or password. </div> </div> <!-- logout message --> <div th:if="${param.logout}"> <div class="alert alert-info">You have been logged out.</div> </div> <div class="form-group"> <label for="username"> Username </label> : <input type="text" class="form-control" id="username" name="username" placeholder="Enter Email ID" autofocus="autofocus"> </div> <div class="form-group"> <label for="password">Password</label>: <input type="password" id="password" name="password" class="form-control" placeholder="Enter Password" /> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-primary" value="Log In" /> </div> </div> </div> </form> <div class="form-group"> <span>New user? <a href="/" th:href="@{/register}">Register here</a></span> </div> </div> </div> </div> </body> </html>

解決方案3
 0  2022-06-08 02:13:47

將高度設置為 100% 仍然不起作用嘗試將高度設置為 100vh。 如果它仍然不起作用，請添加所需像素的邊距頂部。 我希望這解決了這個問題。

解決方案4
 0  2022-06-08 05:29:52

在這種情況下，您需要調整添加到 HTML 中的自定義#multi-color-bg id 規則中給定的 body 標記的高度。 添加一個 100vh就可以了，盡管我建議使用一個單獨的 div 作為正文的所有內容的包裝器，並將正文分開，只有 100vh 的規則到正文標記。 這當然是可選的，只是一個額外的建議，朋友。 

 .navbar { background-color: black; } #multi-color-bg { width: 100%; height: 100vh !important; background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgb(132, 208, 191), rgb(153, 132, 208)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; }
 <!DOCTYPE html> <html xmlns:sec="https://www.thymleaf.org/thymeleaf-extras-springsecurity5" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="ISO-8859-1"> <title>VoiceIt App</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <body id="multi-color-bg"> <!-- create navigation bar ( header) --> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#" th:href="@{/register}">Registration and Login</a> </div> </div> </nav> <br><br><br><br><br><br><br> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1>User Login Page</h1> <form th:action="@{/login}" method="post"> <!-- error message --> <div th:if="${param.error}"> <div class="alert alert-danger">Invalid username or password. </div> </div> <!-- logout message --> <div th:if="${param.logout}"> <div class="alert alert-info">You have been logged out.</div> </div> <div class="form-group"> <label for="username"> Username </label> : <input type="text" class="form-control" id="username" name="username" placeholder="Enter Email ID" autofocus="autofocus"> </div> <div class="form-group"> <label for="password">Password</label>: <input type="password" id="password" name="password" class="form-control" placeholder="Enter Password" /> </div> <div class="form-group"> <div class="row"> <div class="col-sm-6 col-sm-offset-3"> <input type="submit" name="login-submit" id="login-submit" class="form-control btn btn-primary" value="Log In" /> </div> </div> </div> </form> <div class="form-group"> <span>New user? <a href="/" th:href="@{/register}">Register here</a></span> </div> </div> </div> </div> </body> </html>

解決方案5
 0  2022-06-08 05:33:30

實際上body的高度不是整頁，背景是應用在 body 上的。 所以你應該保持body至少100vh高

body{
  min-height: 100vh;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 CSS 背景色不全，不能正確覆蓋整個頁面 HTML 中的背景顏色不適用於整個頁面 將背景色應用於整個HTML頁面 HTML背景顏色沒有填滿整個頁面？ 獲取背景色以覆蓋網站的整個區域 在 CSS 中設置 SVG 顏色以覆蓋整個背景 jQuery背景視頻無法覆蓋整個頁面 背景圖片：始終覆蓋整個頁面 如何讓背景圖片覆蓋整個頁面 背景尺寸：封面； 沒有覆蓋整個頁面
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM