8

更新 -很确定我想通了。代码有点长，但我在这里放了一个页面，以便您查看源代码：http: //www.sorryhumans.com/knockout-header

该概念基于：http ://algemeenbekend.nl/misc/challenge_gerben_v2.html ，然后根据我的需要进行了调整。

标题响应并被淘汰。（请忽略糟糕的 1 分钟响应式 bg 图像实现！）。这个实现也没有使用任何 CSS3，所以我想兼容性不会有很多问题。

我发现的唯一问题是，当 Chrome 中的浏览器宽度为奇数（例如 1393 像素）时，右侧流体列和主中心列之间存在 1 像素的间隙。在最新版本的 Firefox、Internet Explorer 或宽度为偶数时（例如 Chrome 中的 1394px），我没有看到此问题。有任何想法吗？

原始问题： 我正在尝试编写我设计的标题，但无法弄清楚如何获得我正在寻找的效果。请查看所附图片（不，这实际上不是我正在做的事情：）只是一个例子！）

示例图片

该照片是全幅响应式照片。标题是全角的，但其内容位于不超过任意大小（由黑线显示）的响应式网格上，但可以按比例缩小。我可以完成所有这些，但我无法弄清楚如何使标题栏在徽标所在的位置透明。换句话说，我不想将徽标放在栏的顶部，而是想从标题中“敲掉它”。

这甚至可能吗？

4

2 回答 2

4

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

最简单的方法是让剔除效果背后的背景成为图像的实体部分。.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>
于 2012-07-04T00:32:41.020 回答
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。

于 2012-07-04T02:04:55.207 回答