如何使用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。