2014-01-08 80 views
2

我到處搜索過這個,但我還沒有找到任何東西(也許是因爲我不知道如何將它寫入文字)。我是一個HTML和CSS的新手。使內容固定寬度,但使DIV背景延伸。 (CSS)

我基本上有什麼是包裝,導航,標誌,內容和頁腳。我爲身體添加了一個固定的背景圖像,並使我的div半透明。我的div具有約1152像素的固定寬度,邊距自動和覆蓋背景圖像的半透明背景色。 我想要做的是使div透明背景顏色擴展到兩側,覆蓋整個屏幕的寬度,但保持所有的內容在一個固定的寬度。

這裏是我想要做的一個例子: http://electricladystudios.com/ 內容,導航欄,標誌,這一切都在一個特定的寬度居中,但背景點到爲止寬度。

這是我的HTML體:

<body> 
<div id="wrapper"> 

<div id="logo"> <img src="logo.png"></div> 
<div id="nav"> 
    <ul id="navbar"> 
     <li><a href="blank">HOME</a></li> 
     <li><a href="blank">ABOUT</a></li> 
     <li><a href="blank">STUDIO</a></li> 
     <li><a href="blank">GALLERY</a></li> 
     <li><a href="blank">DEMOS</a></li> 
     <li><a href="blank">BLOG</a></li> 
     <li><a href="blank">CONTACT</a></li> 
    </ul> 
</div> 

</div> 

<div id="content"> 
<h1>Something </h1> 

</div> 

<div id=footer> 
<p>WEBPAGE MADE BY ME lol</a></p> 

</div> 

</body> 

這是我的CSS(我知道有很多東西在這裏重複,但是這是我第一次嘗試在編碼由我自己,我只是在優化代碼之前試圖讓所有東西看起來都正確)所以,請耐心等待。

@charset "utf-8"; 
/* CSS Document */ 

body { 
background-image:url(bg2.jpg); 
background-repeat: no-repeat; 
background-position:center center; 
background-attachment:fixed; 
color: white; 
font-family: Arial; 
font-size: 1 em;} 

#wrapper { 

width: 1152px; 
background: rgba(0, 0, 0, 0.8); 
margin: auto; 
margin-top: 20px; 
padding: 30px; 
height: 100px; 
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75); } 

#logo { 
display: inline-block; 
width: 40%; 
float: left; } 

#nav { 
width: 52%; 
display: inline-block; 
text-align: right; 
float: right; 
padding: 20px; 
margin-top: 5px; 
margin-bottom: 75px;} 


#navbar li { 
font-size: 12px; 
display:inline; 
padding: 12px; } 


#navbar li a { 
text-decoration: none; 
color: white; 
-o-transition:.5s; 
-ms-transition:.5s; 
-moz-transition:.5s; 
-webkit-transition:.5s; } 

#navbar li a:hover { 
color: #0062A4; 
transition: .5s; } 

a { 
text-decoration: none; 
color: #0062A4; 
-o-transition:.5s; 
-ms-transition:.5s; 
-moz-transition:.5s; 
-webkit-transition:.5s;} 

a:hover { 
color: #C33; 
transition: .5s; } 



#content { 
clear:both; 
width: 1152px; 
margin: auto; 
margin-top: 20px; 
margin-bottom: 20px; 
padding: 30px; 
height: 800px; 
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75); 
background: rgba(240, 240, 240, 0.6); 
color: #333; 
font-family: Arial;} 

#footer { 
width: 1152px; 
background: rgba(0, 0, 0, 0.8); 
text-align: right; 
color: grey; 
margin:auto; 
padding:5px; 
padding-left: 30px; 
padding-right: 30px; 

box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75); 
font-size: 75%; } 

任何幫助將不勝感激! 感謝

回答

0

他們做的固定背景的方法是這樣的:

background: url(images/Hero.jpg) no-repeat center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
0
body { 
background-image:url(bg2.jpg); 
background-repeat: no-repeat; 
background-attachment:fixed; 
color: white; 
font-family: Arial; 
font-size: 1 em;} 

添加

background-size:100% 100%; 

和刪除

background-position:center center; 
1

我設法做到了。這是我使用的方法:

我將邊距0應用到身體,以刪除強加給其餘div的任何邊框。 然後,我將所有div都包裹在另一個div上,並將該div的寬度設爲100%,然後指定透明背景顏色,然後指定子div上的內容寬度。 結果是,半透明的黑色背景佔據頁面的整個寬度,而內容保持在同一個div內但具有固定寬度。 像這樣:

#outwrap { 
box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.75); 
background: rgba(240, 240, 240, 0.6); 
width: 100%; } 

#content { 
width: 1152px; 
margin: auto; 
padding: 30px; 
color: #333; 
font-family: Arial; } 

繼承人快速演示上的jsfiddle:

http://jsfiddle.net/Dasch/fK5aB/