如何在網站的頂部和底部制作單獨的背景圖像？
[英]How do I make separate background images at top and bottom of site?
問題描述
我正在嘗試為網站的頂部和底部制作單獨的背景圖像。 經過研究后，我發現我需要做包裝並將內容放入其中。 我已經做了很多，背景工作正常，除了最下面的位置。 底部背景似乎具有固定位置，而不是達到絕對底部。 這是我到目前為止的代碼，在此先感謝您能為我提供的任何幫助。
CSS
body {
background-color: #0b0e13;
padding: 0px;
margin: 0px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #717e8e;
}
.accentbar {
color: #2d3a4a;
}
#header {
height: 200px;
width: 960px;
margin-right: auto;
margin-left: auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#content {
height: 600px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#footer {
width: 960px;
margin-top: auto;
margin-right: auto;
margin-left: auto;
text-align: center;
padding: 0px;
margin-bottom: 0px;
}
#footer .text {
color: #5a6470;
}
#headbar {
height: 35px;
width: 960px;
padding: 0px;
margin: 0px;
}
#logo {
background-image: url(/img/logo.jpg);
height: 55px;
background-repeat: no-repeat;
background-position: center bottom;
width: 350px;
margin: 0px;
float: left;
padding-top: 37px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#navbar {
height: 65px;
width: 610px;
float: right;
background-repeat: no-repeat;
padding-top: 35px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#wraptop {
width: 1200px;
height: 100%;
padding: 0;
background-image: url(/img/backs/bg_t.jpg);
background-repeat: no-repeat;
background-position: center top;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#wrapbot {
width: 1200px;
height: 100%;
padding: 0;
background-image: url(/img/backs/bg_b.jpg);
background-repeat: no-repeat;
background-position: center bottom;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arbiters of Light</title>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<div id="wraptop">
<div id="wrapbot">
<div class="header" id="header">
<div class="headbar" id="headbar">Content for class "headbar" id "headbar" Goes Here</div>
<div id="logo"></div>
<div id="navbar">
<img src="/img/nav/abo.jpg" alt="about" width="82" height="60" hspace="0" border="0" /><img src="/img/nav/cha.jpg" alt="charter" width="86" height="60" hspace="0" border="0" /><img src="/img/nav/com.jpg" alt="community" width="97" height="60" hspace="0" border="0" /><img src="/img/nav/for.jpg" alt="forums" width="81" height="60" border="0" /><img src="/img/nav/gal.jpg" alt="gallery" width="78" height="60" border="0" /><img src="/img/nav/res.jpg" alt="resources" width="106" height="60" border="0" /><img src="/img/nav/app.jpg" alt="apply" width="80" height="60" border="0" />
</div>
</div><!-- end header -->
<div class="content" id="content">
</div><!-- end content -->
<div class="footer" id="footer">
<p>PRIVACY - TERMS OF SERVICE - CONTACT - DISCLAIMER<br /></p>
<p class="text">© 2011 ARBITERS OF LIGHT</p>
</div><!-- end footer -->
</div>
</div>
</body>
3 個解決方案
解決方案1
1 2013-03-24 02:30:58
嘗試CSS3多背景：
body {
background: url(/img/backs/bg_t.jpg) no-repeat center top,
url(/img/backs/bg_b.jpg) no-repeat center bottom; /* second backgrond */
}
解決方案2
0 2013-03-24 01:54:58
您需要將wrapbot div獨立放置在頁面/代碼的底部，而不是其他div的內部。 另外，使該wrapbot div位置絕對且位置與底部中心重復x
#wraptop {
width: 1200px;
height: 100%;
padding: 0;
background-image: url(/img/backs/bg_t.jpg);
position: absolute;
background-repeat: x;
background-position: center top;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
z-index:1;
}
#wrapbot {
width: 1200px;
height: 100%;
padding: 0;
background-image: url(/img/backs/bg_b.jpg);
position:absolute;
background-repeat: x;
background-position: center bottom;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
z-index:1;
}
HTML可能看起來像
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arbiters of Light</title>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<div id="wraptop">
</div>
<div class="header" id="header">
<div class="headbar" id="headbar">Content for class "headbar" id "headbar" Goes Here</div>
<div id="logo"></div>
<div id="navbar">
<img src="/img/nav/abo.jpg" alt="about" width="82" height="60" hspace="0" border="0" /><img src="/img/nav/cha.jpg" alt="charter" width="86" height="60" hspace="0" border="0" /><img src="/img/nav/com.jpg" alt="community" width="97" height="60" hspace="0" border="0" /><img src="/img/nav/for.jpg" alt="forums" width="81" height="60" border="0" /><img src="/img/nav/gal.jpg" alt="gallery" width="78" height="60" border="0" /><img src="/img/nav/res.jpg" alt="resources" width="106" height="60" border="0" /><img src="/img/nav/app.jpg" alt="apply" width="80" height="60" border="0" />
</div>
</div><!-- end header -->
<div class="content" id="content">
</div><!-- end content -->
<div class="footer" id="footer">
<p>PRIVACY - TERMS OF SERVICE - CONTACT - DISCLAIMER<br /></p>
<p class="text">© 2011 ARBITERS OF LIGHT</p>
</div><!-- end footer -->
<div id="wrapbot">
</div>
</body>
真的，我什至不稱它們為wraptop，因為任何原因，它們都不需要包裝。 div bgtop和bgbottom可能更好。
解決方案3
0 2011-01-19 16:21:15
抱歉，但是為什么要在包裝頂部放上wrapbot，最好不要將div放在包裝頂部div的末端以下，這可能會解決問題，實際上我通常只將圖像放在z的末尾-index小於我想要的任何索引。 通常這很好
如何使背景圖像上方的透明背景顏色顯示在底部？
[英]How do I make a transparent background-color that is on top of a background-image go to bottom?
如何使div具有背景圖片且沒有內容顯示並從頁面的頂部延伸到底部？
[英]How do I make my div with a background image and no content show and extend from the top to bottom of the page?
如何組合 3 個背景圖像，其中一個被拉伸，兩個用於頂部和底部？
[英]How to combine 3 background images where one is stretched and two are for top and bottom?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.