Html CSS定位-使用平铺背景自动填充div元素的两侧

我正在制作一个标题为始终居中的图像的网页，我想在每一侧沿X轴放置一个平铺背景，但不在其下方，因为它是半透明的。这是容器：

<div id="header">
    <div id="header_left"></div>
    <div id="header_center"></div>
    <div id="header_right"></div>
</div>

---

但是我不能让它工作。关于如何做到这一点有什么想法吗？

我在想，你不是从左/中/右开始，而是从你不想要的东西开始——背景在中心下面。除此之外，请使用第二个div覆盖中心，以便半透明背景仍能正常工作。像这样

#标题{宽度：100%；}
#平铺背景{background:repeat-x；}
#coverupbackground{边距：自动；宽度：600px；背景：白色；}
#标题_中心{不透明度：.5；背景：蓝色；}

我们试试这个。以下是我在代码中看到的问题

左Div和右Div没有宽度，因此它们不会出现

你似乎在声明一些你不需要的东西。就像每个子div中的高度和上/左值一样

我不知道你想要的东西是否可以用css实现

您完全可以通过将div向左浮动，并为其指定100%的%宽度，或指定一定数量的固定宽度来创建。但是，让中间的div固定宽度，并使用剩余的任何空间来左、右对齐，并不能真正起作用。左边和右边的人怎么知道他们的尺寸是一样的？他们怎么知道使用屏幕上剩下的东西？我相信这是可能的，但不是你目前的布局。我想不出我有多激动

#header {
 height: 166px;
 width: 100%;
 border: 1px solid black;
}

#header > div { height: 166px; }

#header_left{
 float: left;
 background-   image:url('http://www.profilerehab.com/twitter/images/small/blue_striped_background_2.jpg');
 background-repeat:repeat-x;
 width: 25%;
}

#header_center {
 float: left;
 opacity: .5;
 background-color: green;
 width: 50%;
 margin: auto;
 z-index: 2500;
}

#header_right {
 float: left;
 background-image:url('http://www.profilerehab.com/twitter/images/small/blue_striped_background_2.jpg');
 background-repeat:repeat-x;
 width: 25%;
}

---

这一个需要改变你的HTML。它将左侧和右侧的DIV放在中间DIV中，然后使用css将它们拉到左侧和右侧

中心DIV相对于收割台DIV定位，并以margin:auto为中心。左侧和右侧DIV的位置为绝对位置，然后拉到中心DIV之外。标题DIV具有overflow:hidden，因此任何产生的溢出都被隐藏

<div id="header">
   <div id="header_center">
      <div id="header_left"></div>

      <div id="header_right"></div>
   </div>
</div>

---

到目前为止，你从中得到了什么？我让中间部分很好地工作，但是左侧和右侧填充了剩余的空间，我根本看不到它们。标题中的图像在哪里？它是在div之后，在

标题_中心

的内部还是标题的背景图像？不太明白你的意思，左侧和右侧填充了剩余的空间？也许你可以给我们看一张图片或一个页面的链接？你想完成这样的事情吗？这里是v2，包括一些漂亮的背景=）-嗯，不是三分之一，但看起来覆盖平铺背景的背景将像一个白色块，问题是在这个标题下会有一些内容，或者当你向下滚动页面时，标题将位于一些内容的顶部，我看不出是透明的。真倒霉让我再看一次你的三段式解决方案。我喜欢这个解决方案-。如果中心小于屏幕宽度的一半，那么它就不能正常工作。但考虑到他将自己的射门设置为1200像素，这将是一个相当狭窄的中锋，我认为他很好。mrtsherman-对于非常大的页面或小的中间分区，您可以将左右分区的宽度设置为任意大的大小，例如2000px-然后您必须相应地移动它们。左DIV向左移动：-2000px，右DIV仍向左移动：100%（或其父节点的固定宽度）

#header {
 height: 166px;
 width: 100%;
 border: 1px solid black;
}

#header > div { height: 166px; }

#header_left{
 float: left;
 background-   image:url('http://www.profilerehab.com/twitter/images/small/blue_striped_background_2.jpg');
 background-repeat:repeat-x;
 width: 25%;
}

#header_center {
 float: left;
 opacity: .5;
 background-color: green;
 width: 50%;
 margin: auto;
 z-index: 2500;
}

#header_right {
 float: left;
 background-image:url('http://www.profilerehab.com/twitter/images/small/blue_striped_background_2.jpg');
 background-repeat:repeat-x;
 width: 25%;
}

<div id="header">
   <div id="header_center">
      <div id="header_left"></div>

      <div id="header_right"></div>
   </div>
</div>

#header {
   position: absolute;
   overflow: hidden;
   height: 166px;
   width: 100%;
   top: 0px;
   z-index: 2500;
}

#header_left{
   position: absolute;
   background-image:url('header_piece.png');
   background-repeat:repeat-x;
   height: 166px;
   width:100%;
   top: 0px;
   left: -100%;
}

#header_center {
   position: relative;
   background-color: green;
   height: 166px;
   width: 1200px;
   margin:0 auto;
}

#header_right {
   position: absolute;
   background-image:url('header_piece.png');
   background-repeat:repeat-x;
   height: 166px;
   width:100%;
   top: 0px;
   left: 100%;
}