1

在尝试了所有可能的位置变化之后：相对/绝对/等和负边距，我想知道是否有人可以告诉我如何让两个绿色条覆盖标题图像 - 在顶部和底部 - 在http://itlaunchpad .patienceandfortitude.com/iphone-cant-get-your-email/。

*请注意，由于 WordPress 的自定义图像标题处理响应性的方式，主标题必须保持为 img 并且不能成为背景属性。

非常感谢！

4

3 回答 3

5

将两个条绝对定位在共同的祖先元素内。例如：

​<header>
    <nav><a href="#">Foobar</a></nav>
    <img src="http://placekitten.com/640/200" />
    <nav><a href="#">Foobar2</a></nav>
</header>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

并使用以下 CSS：

​header { 
    position: relative
}
nav:nth-of-type(1) { 
    top: 0
}
nav:nth-of-type(2) { 
    bottom: 0
}
nav {
    background-color: rgba(0,255,0,.25);
    box-sizing: border-box;
    position: absolute;
    width: 100%;
}

它为您提供以下内容：http: //jsfiddle.net/M3jyV/

于 2012-12-05T05:27:18.450 回答
1

试试这个 CSS

 and make the inline css to external css its for your reference (inline css).

bootstrap.css line 5416

#masthead.container {
    padding: 0;
    position: relative;
    width: 1198px;
}


app.css line 13

#banner {
    position: absolute;
}

bootstrap.css line  3779

.navbar {
    color: #777777;
    overflow: visible;
    position: absolute;
    width: 100%;
}


<div class="container" style="width:100%">
<header style="margin-top: -40px;" class="navbar" role="banner">

看图片：

在此处输入图像描述

于 2012-12-05T05:32:35.270 回答
0

你可以使用 CSS z-index 属性

例如 - http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

 DEMO - http://jsfiddle.net/xY5Re/75/
于 2012-12-05T05:51:48.577 回答