我到處搜索過這個,但我還沒有找到任何東西(也許是因爲我不知道如何將它寫入文字)。我是一個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%; }
任何幫助將不勝感激! 感謝