Question

我到处寻找这个，但我没有找到任何东西（也许是因为我不确切知道如何把它写成文字）。我是HTML和CSS的新手。

我基本上拥有的是包装器，导航，徽标，内容和页脚。我在身体上添加了一个固定的背景图像，使我的div半透明。我的div具有约1152px的固定宽度，自动边距和覆盖背景图像的半透明背景颜色。我想要做的是使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%; }

任何帮助将不胜感激！感谢

Answer 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/

Answer 2

他们执行固定背景的方式是：

background: url(images/Hero.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Answer 3

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;

使内容固定宽度，但使DIV背景扩展。（CSS）

3 个答案:

使内容固定宽度，但使DIV背景扩展。 （CSS）

3 个答案:

使内容固定宽度，但使DIV背景扩展。（CSS）