如何给一张图片设置帘子（水幕）效果，或者反向帘子效果？

这是帘子效果，完整代码如下，大家不明白的可以复制代码到编辑器运行，代码很简单，研究一下都能学会。

    
        
        
        
    
    
        帘子
        
            
                
                美丽的花朵
            
            
                
                宁静的夜晚
            
            
    

接下来，看看反向帘子。

如下是反向帘子的代码

    
        
        
        
        
    
    
        
        反向帘子
        
            
                
                美丽的花朵
            
            
                
                宁静的夜晚
            
            
        
        
    

反向帘子和帘子在写代码时的不同，就是反向帘子用top属性，而帘子用bottom属性。那么应该怎么理解这两个属性呢？

1.这里有一个很多初学者的错误，就是对width属性理解不到位。

大家注意看，上面是一个div包了一个div，然后又包了一个div。这是爷孙三代的关系，如果最外面div宽度设置为900px，那么这个div的子元素，也就是里面的div宽度设置50%，就是根据它的父元素的宽度来定义的，就是450px。如果最里面的div宽度设置为50%，意思就是根据它的父元素设置的宽度，也就是450px的50%，为225px。

2.接下来再讲一下top和bottom

   这两个属性的值，其实也是根据父元素来定义的。

现在给孙子元素加top属性，我们应该这样写：

.kk>div>div{top: 100%;
}

 这个100%就是根据它的父元素定义的，这个代码意思就是说，最里面的div位置离它父元素div的下边框距离是100%，位置在父元素下面，也就是说离它父元素的距离等于它父元素的高。

同理bottom设置100%，就是离它父元素上边框距离是100%，位置在父元素上面。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！