Question

我设计了一个网页。顶部是标题height:77px。标题后我想在屏幕中央添加一个宽度为width: 960px;的图像。现在问题是我面向的是图像来自标题的顶部意味着第二个图像来自顶部，而我需要在77px的高度后显示;

这是HTML ..

 <div id="headerbodyimage" style="width: 960px; margin-top: 77px;  margin: 0 auto;" class="headerbody-wrapper">

 </div>

这是CSS ..

.headerbody-wrapper {
background: url("../images/banner.jpg");
height: 242px;
position: inherit;
width: 100%;
z-index: 60001; }

我曾尝试更改position，但其整个页面正在崩溃

这是我在html中的标题代码..

 <div class="header-wrapper">
 </div>

这是我的CSS。

.header-wrapper {
background: url("../images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
float: left;
height: 77px;
margin: 0 auto;
position: absolute;
width: 100%;
z-index: 60001; }

请帮帮我。

Answer 1

headerbody-wrapper {
    background: url("../images/banner.jpg");
    height: 242px;
   position: inherit;
   width: 100%;
   z-index: 60001; 
  background-positon:xxx;
 }

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Answer 2

使用margin: 0 auto;属性中的style覆盖您的margin-top: 77px;。 margin: 0 auto;是margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;的简写。跟着：

这是 demo 。

HTML：

<div class="header-wrapper"></div>
<div id="headerbodyimage" class="headerbody-wrapper"></div>

CSS：

.header-wrapper {    
    z-index: 60001;     
    width: 100%;
    height: 77px;
    margin: 0 auto;
    background: url("http://placehold.it/77x77") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
}

.headerbody-wrapper {    
    z-index: 60001; 
    background: url("http://placehold.it/960x242");
    width: 960px;
    height: 242px;    
    margin: 0 auto;
}

在屏幕中央显示高度为77px的图像;

2 个答案: