css如何重叠图片 css如何重叠照片

Molet web技术 2022-10-22 486浏览 0

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

使用css把两个图片叠加，可以通过position定位属性和margin-left和margin-top属性来设置图片叠加效果。

代码示例：

利用CSS实现图片重叠，当鼠标悬浮到第一张图片的时候，第二张图片会显示出来。

图片重叠
    
        ul li {
            position: relative;
            float: left;
        }

        ul li #play {
            position: absolute;
            width: 150px;
            height: 100px;
            margin-top: 85px;
            margin-left: 78px;
            display: none;

        } 

        ul li #yuan {
            position: absolute;
            width: 300px;
            height: 300px;
            margin-left: 0px;
            margin-top: 0px;
        }

        ul li #yuan:hover +#play {
            display: block;
        }


        
    


    
        
            <!--  -->