3

我目前没有代码可以作为示例显示，因为我一直在尝试完成这项工作，但甚至没有接近使其按预期工作。由于 NDA，我无法显示图像。所以将描述我能做到的最好的。

基本上：

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

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

  3. 问题是，无论您将浏览器窗口设为多宽，我都需要将箭头尖端留在徽标的右侧，而箭头的尾部仍然与浏览器的右侧齐平。

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

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

我所有的尝试都使 div 太大，导致徽标一直向左冲洗而不是居中。

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

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

样品设计

最终更新：使用 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%;
}
4

1 回答 1

3

如果我猜对了，这可能是一个解决方案：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;
}
​
于 2012-06-26T21:48:07.773 回答