Html 使内容固定宽度，但使DIV背景延伸。（CSS）_Html_Css

Html 使内容固定宽度，但使DIV背景延伸。（CSS）

html css

Html 使内容固定宽度，但使DIV背景延伸。（CSS）,html,css,Html,Css,我到处都在找这个，但我什么也没找到（可能是因为我不知道怎么用语言来表达）。我是HTML和CSS的新手我基本上有一个包装，导航，标志，内容和页脚。我给身体添加了一个固定的背景图像，并使我的div半透明。我的div有一个大约1152px的固定宽度，自动边距和一个覆盖背景图像的半透明背景色。我想做的是使divs透明的背景色延伸到两侧，覆盖整个屏幕，但将所有内容保持在固定宽度下面是我想做的一个例子：内容、导航栏、徽标都以特定宽度为中心，但背景超出了该宽度这是我的HTML正文： <body

我到处都在找这个，但我什么也没找到（可能是因为我不知道怎么用语言来表达）。我是HTML和CSS的新手

我基本上有一个包装，导航，标志，内容和页脚。我给身体添加了一个固定的背景图像，并使我的div半透明。我的div有一个大约1152px的固定宽度，自动边距和一个覆盖背景图像的半透明背景色。我想做的是使divs透明的背景色延伸到两侧，覆盖整个屏幕，但将所有内容保持在固定宽度

下面是我想做的一个例子：内容、导航栏、徽标都以特定宽度为中心，但背景超出了该宽度

这是我的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>

任何帮助都将不胜感激！

感谢他们在固定背景下的工作方式：

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

添加

background-size:100% 100%;

并删除

background-position:center center;

我设法做到了。这是我使用的方法：

我将边距0应用于主体，以便删除强加给其他div的任何边界。然后我将我的所有div包装在另一个div上，给父div一个100%的宽度和透明的背景色，然后在子div上指定内容的宽度。结果是，半透明的黑色背景占据了整个页面的宽度，而内容保持在同一个div内，但具有固定的宽度。像这样：

下面是一个关于JSFIDLE的快速演示：

background-size:100% 100%;

background-position:center center;

#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; }