css重合图形的具体内容-开发网

css重合图形的方式：先进行给照片加上“position: absolute;”款式开展相对定位；然后用margin-left和margin-top特性设置图片部位就可以。

css重合图形的具体内容

本实例教程作业环境：windows7系统软件、CSS3&&HTML5版、Dell G3计算机。

应用css将两个图片叠加，能通过position精准定位特性和margin-left和margin-top特性来设置图片叠加实际效果。

编码实例：

运用CSS完成图片重叠，当鼠标悬浮到第一张图形的情况下，第二张照片会显现出来。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片重叠</title>
    <style>
        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;
        }


    </style>
</head>
<body>
    <ul>
        <li>
            <!-- <img id="play" src="img/ia_100000164.jpg"> -->
            <img id="yuan" src="img/ia_100000165.jpg">
            <!-- 放到下边，反倒表明在墙上 -->
            <img id="play" src="img/ia_100000164.jpg">
        </li>


    </ul>
</body>
</html>

设计效果图：

css重合图形的具体内容