热搜:前端 nest neovim nvim

css重合图形的具体内容

lxf2023-05-27 17:00:01

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重合图形的具体内容

(学习培训视频共享:css视频教学)

以上就是关于css怎样重合图形的具体内容,大量欢迎关注AdminJS其他类似文章!