當我為 body 標簽設置背景圖像時，就像我為 HTML 標簽所做的那樣
[英]When I set background-image for body tag, it's like I've done that for HTML tag
問題描述
我有這個 HTML 頁面，我在 main.css 文件中為我的 body 標簽設置了background-image屬性：
body{ border: 1px dashed orangered; margin: 0 auto; width:90%; height:500px; background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK7PRtGXnzNGOYQkswiaINU_VetoVdDmK53Q&usqp=CAU"); background-size: 100% 100%; background-origin: border-box; } div{ border: 5px dashed green; margin: 50px; padding: 30px; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styling/main.css"> <title>Title</title> </head> <body> <div>hello world!</div> </body> </html>
但在瀏覽器中，圖像顯示為 HTML background-image屬性。 我的意思是它填滿了整個瀏覽器 window 而不僅僅是正文部分？ 如何修復它以使圖像僅填充主體部分？
4 個解決方案
解決方案1
3 已采納 2021-04-03 09:38:23
您需要明確地將背景設置為html以避免背景傳播
body{ border: 1px dashed orangered; margin: 0 auto; width:90%; height:500px; background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK7PRtGXnzNGOYQkswiaINU_VetoVdDmK53Q&usqp=CAU"); background-size: 100% 100%; background-origin: border-box; } div{ border: 5px dashed green; margin: 50px; padding: 30px; } html { background:#fff; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styling/main.css"> <title>Title</title> </head> <body> <div>hello world!</div> </body> </html>
解決方案2
0 2021-04-03 06:20:06
這是解決您的問題的JS小提琴。
https://jsfiddle.net/6u2bmpy9/4/
background-size: 100% 100%屬性導致圖像占據整個視口空間。
我在您的代碼中修改了一些 CSS 屬性以使其正常工作。 我給背景圖像提供了與<body>標簽屬性相同的尺寸，並調整了background-position以使其適合正文
body{
border: 1px dashed orangered;
margin: 0 auto;
width:90%;
height:500px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK7PRtGXnzNGOYQkswiaINU_VetoVdDmK53Q&usqp=CAU");
background-size: 90% 500px;
background-origin: border-box;
background-repeat: no-repeat;
background-position: 50%;
}
解決方案3
0 2021-04-03 06:28:01
如您所見，背景圖像拉伸到正文內容的 100% 寬度/高度，但在其下方重復。
只需添加background-repeat: no-repeat; 作為：
body {
border: 1px dashed orangered;
margin: 0 auto;
width: 90%;
height: 500px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK7PRtGXnzNGOYQkswiaINU_VetoVdDmK53Q&usqp=CAU");
background-size: 100% 100%;
background-origin: border-box;
background-repeat: no-repeat;
}
解決方案4
0 2021-04-03 12:13:27
在這種情況下，您只需設置 background-size: 90% 100%; 就像正文寬度設置為 90% 一樣。
body{ border: 1px dashed orangered; margin: 0 auto; width:90%; height:500px; background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK7PRtGXnzNGOYQkswiaINU_VetoVdDmK53Q&usqp=CAU") top center no-repeat; background-size: 90% 100%; background-origin: border-box; } div{ border: 5px dashed green; margin: 50px; padding: 30px; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styling/main.css"> <title>Title</title> </head> <body> <div>hello world!</div> </body> </html>
或者將 html 和正文分別添加到 CSS 以避免對瀏覽器的誤解。 然后您可以將 background-size: 設置為 100% 100%，但在這種情況下，您還必須將 html 標記添加到 CSS "html{background-color:#FFF}"...
當html標簽沒有設置背景顏色時，為什么身體背景圖像不包含在身體內？
[英]Why is the body background image not contained inside the body when the html tag has no background color set?
我已經聲明了 function chck() 並在 HTML 正文標簽中使用，但它不起作用
[英]I've declared the function chck() and used in HTML body tag and It's not Working
在特定時間間隔后更改“body”標簽中的“background-image”
[英]Change 'background-image' in 'body' tag after specific time interval
如何用 img 標簽覆蓋一個 div（就像 background-image 一樣）？
[英]How to cover a div with an img tag (like background-image does)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.