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

小猫娃来啦

已于 2023-03-10 10:07:10 修改

阅读量244

点赞数 5

分类专栏： Html 文章标签： java 数据库前端 css html

于 2022-08-24 08:28:50 首次发布

本文链接：https://blog.csdn.net/dyk11111/article/details/126472457

版权

Html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           #ml{
               text-align: center;
               font-size: 30px;

           }
           .kk{
               width: 1250px;
               height: 900px;
           }
           .kk>div{
               width: 500px;
               height: 400px;
               float: left;
               margin: 30px 30px;
               position: relative;
               overflow: hidden;
           }
           .kk>div>img{
               width: 100%;
               height: 100%;

           }
           .kk>div>div{
               width: 100%;
               height: 100%;
               position: absolute;
               bottom: 100%;
               line-height: 400px;
               background-color: rgba(0, 0, 0, 0.5);
               font-size: 20px;
               color: white;
               text-align: center;
               transition: 2.5s;
           }
           .kk>div:hover>div{
               bottom: 0;
           }

       </style>
   </head>
   <body>
       <div id="ml"><b>帘子</b></div>
       <div class="kk">
           <div>
               <img src="https://img1.baidu.com/it/u=724179003,4096104503&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661274000&t=88ba0075e025de3e01cd2ceb13adb963" alt="">
               <div>美丽的花朵</div>
           </div>
           <div>
               <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661274000&t=f7708b3543f3da0edae69a218d01fdc7" alt="">
               <div>宁静的夜晚</div>
           </div>

   </body>
</html>

接下来，看看反向帘子。

如下是反向帘子的代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title></title>
       <style>
           #ml{
               text-align: center;
               font-size: 30px;

           }
           .kk{
               width: 1250px;
               height: 900px;
           }
           .kk>div{
               width: 500px;
               height: 400px;
               float: left;
               margin: 30px 30px;
               position: relative;
               overflow: hidden;
           }
           .kk>div>img{
               width: 100%;
               height: 100%;

           }
           .kk>div>div{
               width: 100%;
               height: 100%;
               position: absolute;
               top: 100%;
               line-height: 400px;
               background-color: rgba(0, 0, 0, 0.5);
               font-size: 20px;
               color: white;
               text-align: center;
               transition: 2.5s;
           }
           .kk>div:hover>div{
               top: 0;
           }



       </style>
   </head>
   <body>

       <div id="ml"><b>反向帘子</b></div>
       <div class="kk">
           <div>
               <img src="https://img1.baidu.com/it/u=724179003,4096104503&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661274000&t=88ba0075e025de3e01cd2ceb13adb963" alt="">
               <div>美丽的花朵</div>
           </div>
           <div>
               <img src="https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1661274000&t=f7708b3543f3da0edae69a218d01fdc7" alt="">
               <div>宁静的夜晚</div>
           </div>

       </div>

   </body>
</html>

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

1.这里有一个很多初学者的错误，就是对width属性理解不到位。
           <div>
				<div>
					<div></div>
				</div>
			</div>
大家注意看，上面是一个div包了一个div，然后又包了一个div。这是爷孙三代的关系，如果最外面div宽度设置为900px，那么这个div的子元素，也就是里面的div宽度设置50%，就是根据它的父元素的宽度来定义的，就是450px。如果最里面的div宽度设置为50%，意思就是根据它的父元素设置的宽度，也就是450px的50%，为225px。

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

这两个属性的值，其实也是根据父元素来定义的。
<div class="kk">
				<div>
					<div></div>
				</div>
			</div>
			
现在给孙子元素加top属性，我们应该这样写：
.kk>div>div{
	top: 100%;
}
这个100%就是根据它的父元素定义的，这个代码意思就是说，最里面的div位置离它父元素div的下边框距离是100%，位置在父元素下面，也就是说离它父元素的距离等于它父元素的高。

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

小猫娃来啦

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何给一张图片设置帘子（水幕）效果，或者反向帘子效果？

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

扫一扫