使用HTML和CSS在正文中溢出？_Css_Html_Background_Web

使用HTML和CSS在正文中溢出？

css html web

使用HTML和CSS在正文中溢出？,css,html,background,web,Css,Html,Background,Web,我希望我的一个div的背景图像溢出到body部分。我尝试过溢出：没有任何运气的可见查看图片：看看黄金片是怎么被切掉的吗？有什么建议吗以下是我的设置：在HTML中： <body> <div id="container"> 谢谢我最终实现了：谢谢你的建议，它们激发了我的解决方案。我的最终解决方案是使用一个主div（位置：相对z-index:-1）和我的容器（位置：绝对z-index:1），并在主div中粘贴一个可以绝对定位的图像。这样，内容始终位于顶部，背景不

我希望我的一个div的背景图像溢出到body部分。我尝试过溢出：没有任何运气的可见

查看图片：

看看黄金片是怎么被切掉的吗？有什么建议吗

以下是我的设置：

在HTML中：

<body>
<div id="container">

谢谢

我最终实现了：

谢谢你的建议，它们激发了我的解决方案。我的最终解决方案是使用一个主div（位置：相对z-index:-1）和我的容器（位置：绝对z-index:1），并在主div中粘贴一个可以绝对定位的图像。这样，内容始终位于顶部，背景不会被剪裁。

首先发布标记和css。同时为div指定一个宽度：100%。

您需要确保在包含div的div之外有一个div。您可以在其上下各有一个容器，用于存放所有其他内容

然后你需要有一个100%宽度的div，以整个bg图像为中心

然后在该div中为内容添加另一个div，该div可以是960宽，并具有自动左、右边距，以使其位于页面中心

将你的HTML粘贴到你的帖子中，css是不够的，因为你需要添加到你的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>Untitled Document</title>
<style type="text/css">
.container {
    padding: 0px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#fullWidthImage {
    background-color: #0F9;
    height: 200px;
    width: 100%;
}
#centeredContent {
    padding: 0px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    height: 200px;
    background-color: #09C;
}
</style>
</head>

<body>

<div class="container">
  <p>&nbsp;</p>
  <p>top site content </p>
  <p>&nbsp;</p>
</div><!--container-->

<div id="fullWidthImage">
<div id="centeredContent">
content bla bla
</div>
</div><!--fullwidthImage-->

<div class="container">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>bottom of site content </p>
</div>
<!--container-->
</body>
</html>


无标题文件
.集装箱{
填充：0px；
宽度：960px；
边际上限：0px；
右边距：自动；
边缘底部：0px；
左边距：自动；
}
#全幅图像{
背景色：#0F9；
高度：200px；
宽度：100%；
}
#中心内容{
填充：0px；
宽度：960px；
边际上限：0px；
右边距：自动；
边缘底部：0px；
左边距：自动；
高度：200px；
背景色：#09C；
}

顶级网站内容

内容布拉布拉布拉


网站内容的底部

code请。。我们不知道你的结构使用背景不会起作用，因为背景不会像内容那样溢出。您不能使用

img

？在问题中添加了代码，但我需要div为960px

<!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>Untitled Document</title>
<style type="text/css">
.container {
    padding: 0px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#fullWidthImage {
    background-color: #0F9;
    height: 200px;
    width: 100%;
}
#centeredContent {
    padding: 0px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    height: 200px;
    background-color: #09C;
}
</style>
</head>

<body>

<div class="container">
  <p>&nbsp;</p>
  <p>top site content </p>
  <p>&nbsp;</p>
</div><!--container-->

<div id="fullWidthImage">
<div id="centeredContent">
content bla bla
</div>
</div><!--fullwidthImage-->

<div class="container">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>bottom of site content </p>
</div>
<!--container-->
</body>
</html>