將背景色應用於整個HTML頁面
[英]Applying background color to to whole html page
問題描述
我有一個HTML頁面，其中有一個名為
container的div，我試圖在這里使用引導程序。 在容器內，我有一個稱為row的div。 當我嘗試將背景顏色應用於div時，該顏色僅應用於div內容，並且僅跨越寬度而不是高度。 我正在嘗試將背景應用到整個世界。
這是代碼。
.container { padding: 10px; } .row { background-color: darkgray; }
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/homePage.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> Hello World! </div> </div> </body> </html>
6 個解決方案
解決方案1
2 已采納 2017-01-07 18:57:19
嘗試這個：
1st：html元素具有默認邊距，您每次編寫頁面時都必須處理該默認邊距。
2nd：在使用引導CSS（或其他任何原因的庫）時，您可能不想使用jsfiddle來測試代碼。 由於JSFiddle代碼在引導代碼之前運行。
第三：試試這個：
body,html{ margin:0; width:100%; } html{ background-color: gray; } .container { padding: 1em; max-width:750px; min-height:100vh; width:90%; margin: auto; box-sizing:border-box; background-color:aquamarine; } .row { margin:0; padding-left:20px; }
<html> <body> <div class="container"> <div class="row"> Hello World! </div> <div class="row"> Hello , I am World! </div> </div> </body> </html>
解決方案2
1 2017-01-07 18:50:43
只需將其塗抹在身體上即可。
body{
background-color: red;
}
解決方案3
1 2017-01-07 19:08:35
也許這就是您所需要的。
.container { margin-left:-20px; padding-left:30px; margin-right:-20px; background-color: darkgray; } .row { background-color: darkgray; } body{ background-color: red; }
<div class="container"> <div class="row"> Hello World! </div> </div>
解決方案4
1 2017-01-07 19:14:56
您可以使容器從上到下覆蓋，並左右設置所需的間隙：
.container {
position: absolute;
top: 0px;
left: 10px; /* Gap left */
right: 10px; /* Gap right */
bottom: 0px;
background-color: black;
}
解決方案5
1 2017-01-07 19:19:23
可能這是您需要的：
html,body { padding: 0; margin: 0; background-color: red; } .row { background-color: darkgray; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class="container"> <div class="row"> Hello World! </div> </div> </body>
解決方案6
1 2017-01-07 19:28:26
對我來說似乎很好：
html { background-color: darkgray } .row { background-color: darkgray; }
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/homePage.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row">Hello World! Here goes some content</div> </div> </body> </html>
CSS：漸變僅適用於背景的一半，但背景基色適用於整頁？
[英]CSS: Gradient only applying to half of background, but background base color applies to whole page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.