Question

我为我的一个客户制作了一个（粘性）标题。背景是固定的。因此，当页面滚动时，背景似乎在元素后面滑动。直到标题棒。

当标题贴在顶部时，我的客户希望背景仍然滚动元素（使用页面滚动）。

header {
    display: block;
    position: relative;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;

    background-image: url( '../img/background.png' );
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

header.sticky {
    display: block;
    position: fixed;
}

有人知道如何做到这一点？

伪元素:: before和:: after已经在使用中。

Answer 1

在可以滚动的容器上设置背景图像。就像文件的正文一样。位置：相对。

body { background: url(...); position: relative; }

然后将固定元素设置为固定位置。

header.stickOnTop { position:fixed; top:0px; }

要使背景通过，请将粘性元素的背景设置为不透明或完全透明。

header.stickyOnTop{ opacity: 0.5; }

粘滞标头与滚动背景

1 个答案: