我希望能够使用CSS创建一个简单的窗帘效果，并且我在网络上找到了一个说明如何做的教程。
但是，我无法实际执行任何操作。我尝试重新创建JSFiddle教程中描述的效果，但没有成功。我基本上只是从提供的示例页面之一中复制了代码，但似乎缺少了一些东西。
有人可以告诉我我创建的JSFiddle中缺少什么吗？
显然，我还必须在这里包括JSFiddle代码，因此它是：
的HTML
<!DOCTYPE HTML>
<body>
<div id="test">
<p>test</p>
</div>
<div class="curtain">TEST TEST TEST</div>
</body>
CSS：
body {
padding-bottom: 600px;
}
body:after {
content: "";
height: 1800px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: yellow;
background-size: auto 280px;
z-index: 1;
}
.curtain {
height: 1200px;
position: relative;
z-index: 2;
}
这是您要查找的内容的简化示例：
的HTML
<div class="title">SCROLL DOWN DUDE</div>
<div class="curtain"></div>
的CSS
body {
padding:0;
margin:0;
padding-bottom: 100px;
}
.title {
line-height:50px;
color:#212121;
text-align:center;
position:fixed;
top:0;
left:0;
line-height:150px;
width:100%;
z-index:3;
}
body:after {
content: "COME FROM UNDER";
height: 100px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: black;
z-index: 1;
color: #fff;
text-align:center;
line-height:100px;
}
.curtain {
height: 1200px;
position: relative;
z-index: 2;
background:yellow;
}
基本上底部的填充和：after得到相同的高度。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句