Html 您如何才能实现“一个”目标；淘汰赛；使用CSS的效果？

更新-我很确定我已经解决了这个问题。代码有点长，但我在这里弹出了一个页面，以便您可以查看源代码：

这个概念是基于：然后适应我的需要

头球反应灵敏，被击倒。（请忽略错误的1分钟响应bg映像实现！）。这个实现也不使用任何CSS3，所以我认为兼容性不会有太多问题

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

原始问题： 我正在尝试编写一个我设计的标题，但无法找到如何获得我想要的效果。请看附件中的图片（不，这不是我正在做的：）只是一个例子！）

这张照片是一张全幅响应式照片。标题为全宽，但其内容位于响应网格上，该网格不超过任意大小（以黑线显示），但可以缩小。我可以完成所有这一切，但我遇到的困难是如何使标题栏在徽标所在的位置透明。换言之，与其让logo出现在条顶上，我更愿意在页眉上“敲掉它”

---

这是可能的吗？

对于敲除效果没有固有的支持，因此您必须将文本作为图像的一部分

要做到这一点，最简单的方法是让击倒效果后面的背景成为图像的实体部分。您可以创建一个具有坚实背景和透明度的

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

左侧，将伸展
图片（s）转到此处
你需要多少套就有多少套
图片（s）转到此处
右侧，将伸展

不是最漂亮的解决方案，但使用了实验性的css3 flexbox:（带

display:table

fallback）

请注意：flexbox w3c规范仍在不断变化，可能会第三次更改。我只在IE9（IE9和IE8两种模式下进行了测试。在IE7模式下不工作）和Chrome 20和22中进行了测试

---

一些小改动：您的5 div布局没有javascript。

使用

.png

是最简单的方法，尤其是对于徽标。@Sean您尝试过什么？让toy看看css

不透明度

？使用图像也是我能想到的唯一方法。似乎同意，但也提到SVG作为替代方案。我很想知道是否还有另一种方法。@JamesKhoury我唯一能想到的方法是使用5个div：2个“side”div，具有透明背景，可以无限延伸，1个logo div是透明背景的png，去掉logo，一个div作为内容区域，一个div用来保存徽标和内容。有点像这样：[side][logo][content][side]，但是，我认为没有javascript这是不可能的，对吗？如果我有一个container div，透明的“knockout”效果将采用容器的颜色。WebKit中支持（另请参见），但您只能将图像用作掩码，而不能使用文本。这也是我大致的想法，但我无法理解CSS的外观。参考原始图像，无论屏幕大小如何，标题中黑色条之间的区域应保持居中。你能帮我弄清楚那部分吗？非常感谢您迄今为止的帮助@SeanLinehan您可以使用jQuery设置宽度，但另一个答案中的

flexbox

方法似乎要优雅得多。非常感谢您花时间提供帮助！我想我找到了一个不错的解决方案，不使用CSS3，如果你有兴趣，我已经更新了原始帖子。@SeanLinehan我很高兴你找到了答案。最好将您的解决方案作为答案发布，并将其标记为已接受。这样其他人可以更容易地找到您的解决方案。

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