Question

在wordpress-theme Avada（一个演示网站）中，我可以看到他们正在使用一些背景效果来同时重叠背景和文本元素。第一个标题与“我们是谁”部分重叠。他们是如何做到的？

Answer 1

使用课程div

查找tfs-slider flexslider main-flex

<div class="tfs-slider flexslider main-flex" ...>

您会注意到它具有属性position: fixed。这意味着它不会随内容滚动。此外，他们还更改了各种元素的z-index属性，使其位于顶部的菜单下方以及在其上方流动的内容。

Answer 2

基本上这将恢复到此CSS属性：

background-attachment: fixed;

我在这里有一个基本的例子：http://jsfiddle.net/1j3w8ru6/

Answer 3

Here is a really simple working example

我们在这里做的是将第一个标题的位置设置为＆＃34;固定＆＃34;，使用＆＃34; margin-top＆＃34;推送屏幕下方的内容，并设置内容＆＃ 39; s z-index的值高于第一个标题的值。

这是CSS：

html,
body {
    width:100%;
    height:100%;
}

#heading {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background:#000000;
    z-index:2;
}

#content {
    width:100%;
    position:relative;
    z-index:3;
    background:#FFFFFF;
    margin-top:100%;
}

什么CSS / HTML - 我要照顾的功能？

3 个答案: