如何使用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您可以在想要挖空效果的地方创建一个具有纯色背景和透明度的区域，并使用 cssopacity使整个标题部分透明。您需要设置具有多个部分的标题，以便非图像的部分（即黑条之外）具有背景颜色，而具有图像的部分则没有。

非常粗略地：

<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>