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

更新 – 很确定我想出来了.代码有点长,但我在这里扔了一个页面,所以你可以查看源代码： 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)没有看到此问题.有任何想法吗？

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

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

这有可能吗？

解决方法

最简单的方法是将挖空效果背后的背景作为图像的实体部分.您可以在需要挖空效果的地方创建具有纯色背景和透明度的.png,并使用css不透明度使整个标题部分透明.您需要设置具有多个部分的标题,以便不是图像的部分(即黑色条形图外部)具有背景颜色,而带有图像的部分不具有背景颜色.

非常粗略：

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

（编辑：ASP站长网）