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

Question

我正在制作一个带有页眉的网页，它的图像总是居中，我想沿着X轴在每一边放置一个平铺的背景，但不是在它的下面，因为它是半透明的。这是容器：

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

这是CSS：

    div {
       position: absolute;
    }

    #header {
       height: 166px;
       width: 100%;
       top: 0px;
    }

    #header_left{
       background-image:url('header_piece.png');
       background-repeat:repeat-x;
       height: 166px;
       display: block;
       top: 0px;
       left: 0px;
    }

    #header_center {
       background-color: green;
       height: 166px;
       width: 1200px;
       margin-left: -600px;
       left: 50%;
       top: 0px;
       z-index: 2500;
    }

    #header_right {
       background-image:url('header_piece.png');
       background-repeat:repeat-x;
       height: 166px;
       display: block;
       top: 0px;
       right: 0px;
    }

但是我不能让它工作。你有什么建议吗？

Answer 1

这个需要更改您的HTML。它将左侧和右侧的DIV放入Centre中，然后使用css将它们拉出到左侧和右侧。

中心DIV相对于标题DIV定位，并居中页边距:auto。左右两个DIV的绝对位置是拉动，然后在中心DIV之外。标头DIV有overflow :隐藏，因此任何由此产生的溢出都会被隐藏。

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

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

CSS：

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

Answer 2

我在想，不是有左/中/右，而是你实际上从你不想要的东西开始-背景在中心下面。除了使用第二个div覆盖中心，以便半透明的背景仍然有效。所以就像这样。

http://jsfiddle.net/pGYsL/

#header { width: 100%; }
#tiledbackground { background: repeat-x; }
#coverupbackground { margin: auto; width: 600px; background: white; }
#header_center { opacity: .5; background: blue; }

<div id="header">
  <div id="tiledbackground">
    <div id="coverupbackground">
      <div id="header_center"></div>
    </div>
  </div>
</div>

Answer 3

那就试试这个吧。以下是我在您的代码中看到的问题。

，

1. ，Left和Right Div没有宽度，所以它们不会出现在

，

1. ，你似乎在声明一堆你不需要的东西。像每个子div和top/left值中的高度。
2. 我不知道css能不能实现你想要的东西。

http://jsfiddle.net/UvngC/

你可以通过向左浮动你的div并给它们加起来达到100%的%宽度或者加起来达到一定数量的固定宽度来创建它。但是，让center 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%;
}