html - 如何在css中制作这样的标题？

Question

我的网站代码很普通

<div class="header"></div>
<div class="site-inner"></div>
<div class="footer"></div>

如何在图像上制作标题背景？整个网站内容是否必须是绝对位置和margin-top:-500px？

那是唯一的情况吗？

Answer 1

我假设你的意思是重叠。

负边距是一种方式。

.header {
  height: 50px;
  background: lightblue;
}
.site-inner {
  width: 80%;
  margin: auto;
  height: 50px;
  background: lightgrey;
  margin-top: -30px;
  box-shadow: 0 -2px 2px black;
}

<div class="header"></div>
<div class="site-inner"></div>

Answer 2

您可以使用：

.header{

  width: 80%;
  height: 75px;
  margin: 0 auto; 
  margin-top: -20px;
  background:#3A3A3A;


}

Answer 3

看一下定位：Positioning， z-index 也可能是相关的：Z-index，在我的例子中注意 .header-bg 上的负索引 一个简单的例子：

.header-bg {
    width: 100%;
    height: 200px;
    z-index: -1;
    background: lightblue;
    position: absolute;
    top: 0;
    left: 0;
}
.header {
    margin-top: 50px;
    height: 50px;
    background: grey;
    z-index
}
.menu {
    height: 80px;
}
.site-inner {
    height: 400px;
    width: 100%;
    background: red;
}

<div class="header-bg"></div>
<div class="header"></div>
<div class="menu">menu</div>
<div class="site-inner">Site inner</div>
<div class="footer"></div>

Answer 4

负 z-index 允许您将元素放在其他元素后面。答案很简单。

<div class="color"></div>
<div class="fixed">
    <div class="header">

    </div>
    <div class="nav">
        Text
    </div>
    <div class="body">

    </div>
</div>

---

html, body
{
    height: 100;
    margin: 0;
}

div.color
{
    position: absolute; /*Take out of the flow*/
    top: 0; /*Move to top left*/
    left: 0;
    z-index: -1; /*Place below normal elements in the flow*/

    width: 100%; /*Fill whole width*/
    height: 300px; /*300px tall*/

    background: #c7edfb; /*Color specified*/
}

div.fixed
{
    margin: 50px auto 0; /*push whole document down 50px and center*/
    width: 600px; /*document is 600px wide*/
}

div.header
{
    height: 150px; /*top gray block is 150px tall*/
    background: #222; /*dark gray*/
}

div.nav
{
    padding: 25px 0; /*Gap between blocks above and below*/
}

div.body
{
    min-height: 300px; /*Force a height*/
    background: #777; /*Light gray*/

    box-shadow: 0 0 8px black; /*Drop shadow*/
}

JSFiddle