Question

我希望能够使用CSS创建一个简单的窗帘效果，我找到了a tutorial on the web that explains how to do it。

然而，我无法让它真正做任何事情。我试图重新创建教程on JSFiddle中描述的效果，但没有任何成功。我基本上只是复制了一个提供的示例页面中的代码，但似乎缺少了一些东西。

有人可以告诉我the JSFiddle I've created中缺少什么吗？

显然我还必须在这里包含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;
}

Answer 1

以下是您正在寻找的简化示例：

<强> DEMO

<强> 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;
}

基本上是底部填充和：获得相同的高度后..

Answer 2

你错过了一些CSS。请尝试以下

 body
    {
margin: 0;
padding: 0;
    }
 body { color: #000; }
 img { border: none; }
  p
    {
font-size: 1em;
margin: 0 0 1em 0;
line-height: 20px;
    }
 h1 {
margin: 0 0 1em;
font-size: 26px;
    }

 /* Branding */
  #cssninja
    {
position: absolute;
top: 0;
left: 0;
background-color: #18191d;
width: 100%;
height: 40px;
z-index: 3;
    }
#cssninja p
{
    color: #ffffff;
    text-align: center;
    margin: 10px 0 0 0;
}
#cssninja a
{
    color: #ffffff;
    text-decoration: none;
    background: url(../assets/ico_ninja.gif) 0 0 no-repeat;
    padding: 4px 0 9px 28px;
}
#cssninja a:hover
{
    text-decoration: underline;
}

    body {
    padding-bottom: 600px;
   }
  body:after {
  content: "";
   height: 1800px;
position: fixed;
   left: 0;
   right: 0;
   bottom: 0;

    background-color: #000;
background-position: 40% 100%, 50% 100%, 63% 100%;
background-repeat: no-repeat;
    background-size: auto 180px,auto 280px,auto 180px;
    z-index: 1;
   }

 .curtain {
height: 1200px;
position: relative;
z-index: 2;
    } 

    /* 
Curtain effect using CSS gradients 
http://meyerweb.com/eric/thoughts/2012/06/22/cicadients/
    */
   .curtain {
background-image:
    -webkit-linear-gradient(
        90deg,
        rgba(255,128,128,0.25),
        rgba(255,128,128,0) 75%
    ),
    -webkit-linear-gradient(
        -1deg,
        transparent,
        transparent 30%,
        #510A0E 35%,
        #510A0E 40%,
        #61100F 43%,
        #B93F3A 50%,
        #4B0408 55%,
        #6A0F18 60%,
        #651015 65%,
        #510A0E 70%,
        #510A0E 75%,
        rgba(255,128,128,0) 80%,
        transparent
    ),
    -webkit-linear-gradient(
        2deg,
        #510A0E,
        #510A0E 20%,
        #61100F 25%,
        #B93F3A 40%,
        #4B0408 50%,
        #6A0F18 70%,
        #651015 80%,
        #510A0E 90%,
        #510A0E
    );
background-image:
    -moz-linear-gradient(
        90deg,
        rgba(255,128,128,0.25),
        rgba(255,128,128,0) 75%
    ),
    -moz-linear-gradient(
        -1deg,
        transparent,
        transparent 30%,
        #510A0E 35%,
        #510A0E 40%,
        #61100F 43%,
        #B93F3A 50%,
        #4B0408 55%,
        #6A0F18 60%,
        #651015 65%,
        #510A0E 70%,
        #510A0E 75%,
        rgba(255,128,128,0) 80%,
        transparent
    ),
    -moz-linear-gradient(
        2deg,
        #510A0E,
        #510A0E 20%,
        #61100F 25%,
        #B93F3A 40%,
        #4B0408 50%,
        #6A0F18 70%,
        #651015 80%,
        #510A0E 90%,
        #510A0E
    )       
    ;
background-image:
    -ms-linear-gradient(
        90deg,
        rgba(255,128,128,0.25),
        rgba(255,128,128,0) 75%
    ),
    -ms-linear-gradient(
        -1deg,
        transparent,
        transparent 30%,
        #510A0E 35%,
        #510A0E 40%,
        #61100F 43%,
        #B93F3A 50%,
        #4B0408 55%,
        #6A0F18 60%,
        #651015 65%,
        #510A0E 70%,
        #510A0E 75%,
        rgba(255,128,128,0) 80%,
        transparent
    ),
    -ms-linear-gradient(
        2deg,
        #510A0E,
        #510A0E 20%,
        #61100F 25%,
        #B93F3A 40%,
        #4B0408 50%,
        #6A0F18 70%,
        #651015 80%,
        #510A0E 90%,
        #510A0E
    );
background-image:
    -o-linear-gradient(
        90deg,
        rgba(255,128,128,0.25),
        rgba(255,128,128,0) 75%
    ),
    -o-linear-gradient(
        -1deg,
        transparent,
        transparent 30%,
        #510A0E 35%,
        #510A0E 40%,
        #61100F 43%,
        #B93F3A 50%,
        #4B0408 55%,
        #6A0F18 60%,
        #651015 65%,
        #510A0E 70%,
        #510A0E 75%,
        rgba(255,128,128,0) 80%,
        transparent
    ),
    -o-linear-gradient(
        2deg,
        #510A0E,
        #510A0E 20%,
        #61100F 25%,
        #B93F3A 40%,
        #4B0408 50%,
        #6A0F18 70%,
        #651015 80%,
        #510A0E 90%,
        #510A0E
    );
background-image:
    linear-gradient(
        90deg,
        rgba(255,128,128,0.25),
        rgba(255,128,128,0) 75%
    ),
    linear-gradient(
        -1deg,
        transparent,
        transparent 30%,
        #510A0E 35%,
        #510A0E 40%,
        #61100F 43%,
        #B93F3A 50%,
        #4B0408 55%,
        #6A0F18 60%,
        #651015 65%,
        #510A0E 70%,
        #510A0E 75%,
        rgba(255,128,128,0) 80%,
        transparent
    ),
    linear-gradient(
        2deg,
        #510A0E,
        #510A0E 20%,
        #61100F 25%,
        #B93F3A 40%,
        #4B0408 50%,
        #6A0F18 70%,
        #651015 80%,
        #510A0E 90%,
        #510A0E
    );
background-size:
    auto,
    300px 100%,
    109px 100%;
background-repeat: repeat-x;
    }

如何实现CSS页脚＆＃34;幕布＆＃34;影响？

2 个答案: