HTML CSS 圣诞实现浮现图片在另一个图片上的效果

最新推荐文章于 2023-11-28 09:17:50 发布

Dogboss233

最新推荐文章于 2023-11-28 09:17:50 发布

阅读量3k

点赞数 4

分类专栏：网页设计 CSS 文章标签：网页设计 html5 css3 css

本文链接：https://blog.csdn.net/m0_51393229/article/details/121530685

版权

网页设计同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

实例：制作手机开机锁屏界面——圣诞

效果：

在这里插入图片描述

html CSS 代码实现：

<html>
   <head>
       <title>圣诞</title>
<style type="text/css">
    .father {
        width: 365px;
        height: 600px;
        background: #FFF;
        padding: 10px;
    }
    .css1{position:absolute;
          left:120px;
          top:70px;
          z-index:5;
    }
    .css2{position:absolute;
          left:75px;
          top:250px;
          z-index:3;
    }
</style>
   </head>
   <body>
       <div class="father">
           <img src="xueren.jpg"/>
           <div class="css2"><img src="hu.jpg" /></div>
           <div class="css1"><img src="shijian.jpg" /></div>
       </div>
</body>
</html>

图片自取：

网页材料图片

小结：

边看教程边写的，很多同学都会想到用background-image属性来插入图片，这个方法我也试过是没办法将图片显示在另一张图片上面的。
我只学会了z-index这个标记😅。z-index数值大的会显示在数值小的上面。

Dogboss233

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
HTML CSS 圣诞实现浮现图片在另一个图片上的效果

实例：制作手机开机锁屏界面——圣诞效果：html CSS 代码实现：<html> <head> <title>圣诞</title><style type="text/css"> .father { width: 365px; height: 600px; background: #FFF; padding: 10px; } .css
复制链接

扫一扫