html - CSS 如何使图像流畅地延伸到浏览器的一侧，并与居中的内容对齐？

Question

我目前没有可作为示例显示的代码，因为我一直在努力使它正常工作，但甚至没有接近使其按预期工作。由于保密协议(protocol)，我无法展示图片。所以我会尽我所能描述。

基本上:

1. 我在 div 中有一个 Logo 图像。 div 有 margin:0 auto;所以它在浏览器中居中。

2. 我有一个透明背景的“箭头”png 图像，需要在浏览器的右侧刷新。

3. 要注意的是，无论您将浏览器窗口设置多宽，我都需要将箭头尖端保持在 Logo 右侧的旁边，并且箭头的尾部仍与浏览器的右侧齐平.

4. 页面内容也将居中。以防万一需要此信息。

基本上我需要将箭头调整为浏览器宽度，但要确保箭头尖端始终指向 Logo 。

我所有的尝试都使 div 太大，导致 Logo 一直冲到左边而不是居中。

我知道这可能包括将箭头分成两个图像，但即便如此，我仍然对如何使它真正起作用感到困惑。开始认为这是不可能的事情。

这是一张图片来解释，我相信一旦我弄清楚如何做顶部箭头，我就能得到底部箭头。底部箭头略有不同，因为箭头尖端可能位于不同的位置，具体取决于页面。

最终更新:使用 Max 的建议

注意:我只在 chrome、firefox 和 safari 上测试了它，这些都是截至本文发布时的最新版本。不确定使用其他版本或 IE 会遇到什么问题。

HTML

 <div class="header-wrapper">

  <div class="header">
   <img src="images/logo.png" />
  </div>
  <div class="arrow-wrapper">
   <div class="arrow-tail"></div>
  </div>
 </div>

CSS 代码

.header-wrapper{
    position:relative;
    width:100%;
    overflow:hidden;
}

.header {

   position: relative;
    z-index: 10;
    height: 69px;
    margin: 0 auto;
}

.arrow-wrapper {
    z-index: 5;
    background:url(../images/arrow_tip.png) no-repeat top left;
    width: 50%;
    position: absolute;
    left: 50%;
    top: 18px;
    padding: 0 0 0 120px; 
    height:23px;
    margin-left:140px;
}

.arrow-tail{
    background:url(../images/arrow_tail.png) repeat-x top left;
    height:23px;
    width:100%;
}

Answer 1

如果我没猜错，这可能是一个解决方案: http://jsfiddle.net/WazcT/3/

HTML:

<div class="main">
  <div class="header"></div>
  <div class="arrow_container">
    <div class="arrow">&larr;&dash;&dash;</div>
  </div>
</div>

CSS:

.main{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.header{
    position: relative;
    opacity: 0.5;
    z-index: 10;
    width : 400px;
    height: 100px;
    margin: 0 auto;
    background: #ccc;
}

.arrow_container {
    z-index: 5;
    background: #88b7d5;
    width: 50%;
    position: absolute;
    left: 50%;
    top: 10px;
    padding: 10px 0 10px 200px;     
}

.arrow{
    padding: 10px;
    background: #eee;
    font-size: 32px;
}
​