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

Question

更新： 我相信我已经解决了这个问题。代码有点长，但是我在这里放了一个页面，你可以查看源代码：http://www.sorryhumans.com/knockout-header 这个概念基于：http://algemeenbekend.nl/misc/challenge_gerben_v2.html，并根据我的需求进行了调整。

标题是响应式的，并且被“敲掉了”（请忽略不好的、1分钟实现的响应式背景图片！）。此实现也不使用任何CSS3，因此我想兼容性不会有太多问题。

我唯一发现的问题是，在Chrome浏览器宽度为奇数时（例如1393像素），右侧流动列和主中心列之间会有1像素的间隙。我在最新版本的Firefox、Internet Explorer或宽度为偶数时（例如Chrome中的1394像素）没有看到这个问题。有什么想法吗？ 原始问题：我正在尝试编写一个我设计的标题，但无法找出我要寻找的效果。请看附图（不，这不是我正在做的 :) 只是一个例子！） 这张照片是全宽度响应式的。标题是全宽度的，但其内容是在一个响应式网格上的，不超过某个任意大小（由黑线表示），但可以缩小。我能完成所有这些，但我遇到的问题是如何使头部栏在标志处透明。换句话说，我想让标志“敲掉”头部而不是将其放在头部上。

这可能吗？

- Sean Linehan

---

使用 .png 是最简单的方法，特别是对于标志而言。 - thirtydot

@Sean 你尝试过什么呢？你看过css里的opacity属性吗？ - James Khoury

使用图像是我所能想到的唯一方法。这篇帖子似乎也同意，但也提到SVG作为另一种选择。不过我很想知道是否还有其他方法。 - Zhihao

WebKit支持CSS遮罩（也可参见http://caniuse.com/css-masks），但只能使用图像作为遮罩，而不能使用文本。 - Paul D. Waite

@SeanLinehan 对不起，我误解了问题。我会使用基于图像的解决方案。关于居中，这取决于您想要支持哪些浏览器。 - James Khoury

Answer 1

没有内在的支持，可以使用图片来呈现 knockout effect。

最简单的方法是将 knockout effect 后面的背景作为该图片的实部，可以创建一个带有固定背景和透明度的 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>

- CheeseWarlock

---

这也是我大致想法，但我无法弄清楚CSS应该是什么样子。参考原始图像，页眉中黑色条之间的区域应保持居中，而不受屏幕大小的影响。你能帮我解决这个问题吗？非常感谢你迄今为止的帮助！ - Sean Linehan

@SeanLinehan 你可以使用jQuery来设置宽度类似于这样，但是另一个回答中的 flexbox 方法似乎更加优雅。 - CheeseWarlock

Answer 2

http://jsfiddle.net/GZ8Xv/

这不是最美观的解决方案，但使用了实验性的CSS3弹性盒子：(带有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模式）和Chrome 20和22中进行了测试，不适用于IE7模式。进行了一些小的更改：http://jsfiddle.net/GZ8Xv/2/，您就可以实现5个div布局而无需使用JavaScript。

- James Khoury

---

非常感谢您抽出时间来帮助！我认为我找到了一个不使用CSS3的不错解决方案，如果您感兴趣，我已经在原始帖子中更新了它。 - Sean Linehan

@SeanLinehan，很高兴你找到了答案。将您的解决方案发布为答案并标记为已接受会很好。这样其他人就可以更轻松地找到您的解决方案。 - James Khoury