本文主要是介绍HTML CSS 圣诞 实现浮现图片在另一个图片上的效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
实例:制作手机开机锁屏界面——圣诞
效果:
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数值大的会显示在数值小的上面。
这篇关于HTML CSS 圣诞 实现浮现图片在另一个图片上的效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!