如何使用CSS实现“淘汰”效果？

Question

更新 - 非常确定我认为这一点。代码有点长，但我在这里扔了一页，以便您查看来源：http://www.sorryhumans.com/knockout-header

这个概念基于：http://algemeenbekend.nl/misc/challenge_gerben_v2.html，然后根据我的需要进行调整。

标题响应并被淘汰。 （请忽略不良，1分钟响应bg图像实现！）。这个实现也没有使用任何CSS3，所以我认为兼容性不会有太多问题。

我发现的唯一问题是，当浏览器宽度为Chrome中的奇数（例如1393px）时，右侧流体柱与主中心列之间存在1px的间隙。我在最新版本的Firefox，Internet Explorer中或宽度为偶数时（例如Chrome中的1394px）没有看到此问题。有什么想法吗？

原始问题： 我正在尝试编写我设计的标题，但我无法弄清楚如何获得我正在寻找的效果。请看附图（不，这实际上不是我正在做的:)只是一个例子！）

照片是全宽响应照片。标题是全宽的，但其内容位于响应网格上，不超过任意大小（由黑线表示），但可以缩小。我可以完成所有这些，但是我无法弄清楚如何使标题栏在标志所在的位置变得透明。换句话说，我不想将标志放在栏杆顶部，而是想把它“敲出”标题。

这甚至可能吗？

Answer 1

对于挖空效果没有固有的支持，所以你必须将文本作为图像的一部分。

最简单的方法是让挖空效果背后的背景成为图像的坚实部分。您可以创建一个具有实体背景和透明度的.png，以获得挖空效果，并使用css opacity使整个标题部分透明。您需要设置包含多个部分的标题，以便不是图像的部分（即黑条之外）具有背景颜色，而带图像的部分则不具有背景颜色。

非常粗略：

<div id="outerHeaderWithOpacity">
  <div class="hasBackground">Left side, will stretch</div>
  <div class="noBackground">Image(s) go here</div>
  <div class="hasBackground">As many sets as you need</div>
  <div class="noBackground">Image(s) go here</div>
  <div class="hasBackground">Right side, will stretch</div>
</div>

Answer 2

http://jsfiddle.net/GZ8Xv/

不是最漂亮的解决方案，而是使用实验性的css3 flexbox：（display: table后备）

<div class="wrapper">
    <div class="left"><br /></div>
    <div class="middle"><br /></div>
    <div class="right"><br /></div>
</div>

.left, .right
{
    height:100%;
    border: 1px solid black;
    display:table-cell;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -o-flexbox;
    -webkit-flex: 1;
}

.middle
{
    display: table-cell;
    display: -webkit-flexbox;
    width: 500px;
    height:100%;
    border: 1px solid blue
}

.wrapper
{
    display: table;

    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -o-flexbox;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    -o-box-orient: horizontal;
    width: 100%;
    height: 100px;
}

请注意： Flexbox w3c规范仍在不断变化，可能会第三次发生变化。我只在IE9中测试了这个（IE9和IE8模式。在IE7模式下不起作用）和Chrome 20和22

一些小的改动：http://jsfiddle.net/GZ8Xv/2/你有5个div布局，没有javascript。