如何实现CSS页脚“窗帘”效果？ 我希望能够使用CSS创建一个简单的窗帘效果，我在网络上找到了一个解释如何做的教程。 但是，我无法真正做任何事情。我试图

问题描述 投票：0回答：1
明显我还必须在此处包含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; }

这里是您要寻找的简化示例： demo

html

<div class="title">SCROLL DOWN DUDE</div>
<div class="curtain"></div>



html

css


1个回答




    
    
    

        

            

                

                    
2
投票

                    

                

            

        

        


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


基本上是底部padding，:after
获得相同的高度。
    


您缺少一些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;
    }

    

	



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.