从图象的背景顶面切口

Question

我有一个site，即使高度增加，图像的背景也会被切断。如何才能在页面上显示图像的顶部区域？

.top-area {
    background: url(../img/matt.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 677px;
}

Answer 1

将.top-area更改为此。您正在使用fixed背景附件，因此您需要修改背景位置以清除导航（78px高），因此将背景图像向下移动78px。我还为.top-area添加了28px的保证金 - 所以div也会清除你的标题。

.top-area {
    background: url(../img/matt.png) no-repeat center 78px fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 677px;
    min-height: 100%;
    margin-top: 28px;
}

Answer 2

它发生了，因为你使用了导航栏位置固定。如果你想使用这个添加

body{padding-top:78px;}

 or

.top-area{margin-top:28px;}