Question

我正在尝试为网站创建标题。我想要做的是在页面背景中一直重复背景图像。此图像宽1px。在该图像的顶部，我想将另一个背景图像置于前一个图像的中心，让它居中，不再重复。第二张图片是网站的标识和标题等。

使用下面的代码，我得到顶层不居中，并重复底层。

.mainHeaderBottomLayer
{
    background-image: url("images/header.png");
    background-repeat: repeat-x;
    height: 107px;
    text-align: center;
}
.mainHeaderTopLayer
{
    background-image: url("images/headerLayer.png");
    background-repeat: no-repeat;
    width: 1200px;
    margin: 0 auto;
}

这是html

<div class="mainHeaderBottomLayer">
    <div class="mainHeaderTopLayer"></div>
</div>

任何人都知道如何做到这一点？

Answer 1

background：url（“images / headerLayer.png”）无重复中心顶部#fff;
或
background：url（“images / headerLayer.png”）no-repeat 50％0 white;

Answer 2

.mainHeaderTopLayer {
background: url(images/headerLayer.png) no-repeat center top;
width: 1200px;
height: 200px;
margin: 0 auto; }

只需通过背景属性和位置属性居中图像。

根据上述评论，您还需要一个身高属性....

Answer 3

使用背景定位来对齐徽标：

.mainHeaderTopLayer
{
    background-image: url("images/headerLayer.png");
    background-repeat: no-repeat;
    background-position: center center;
    width: 1200px;
    margin: 0 auto;
}

CSS：将背景图像置于重复背景图像的上方

3 个答案: