CSS-图像映射

最新推荐文章于 2021-02-19 13:53:21 发布

weixin_33721427

最新推荐文章于 2021-02-19 13:53:21 发布

阅读量118

点赞数

本文探讨了图像映射技术的应用，通过HTML、CSS代码示例展示了如何将热点区域与图片内容结合，实现信息与视觉的完美融合。重点介绍了布局优化、内容展示及交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图像映射是将一些区域变成热点，我们在网上获取搜索图片，图片上会有关于任务的简短信息介绍，还有一个接触更多的就是QQ空间的相册，浏览QQ空间照片鼠标滑动到人物头像的时候让你选择标记人物，都是将图片和内容混合在一起进行表现。用户在看图片的时候不在是冰冷冷的图片，其实就是实现起来这种内容和图片的映射很简单，简单的看下效果:

Html代码:

    <!-- 博客园-FlyElephant http://www.cnblogs.com/xiaofeixiang/ -->
    <div class="group-img">
        <img src="../../public/images/group.jpg" alt="合影">
        <ul>
            <li class="li">
                <a href="http://www.cnblogs.com/xiaofeixiang/">
                    <span class="outer">
        	<span class="inner">
        	<span class="note">李连杰</span>
                    </span>
                    </span>
                </a>
            </li>
            <li class="yao">
                <a href="http://www.cnblogs.com/xiaofeixiang/"> <span class="outer">
        	<span class="inner">
        	<span class="note">姚明</span>
                    </span>
                    </span>
                </a>
            </li>
        </ul>
    </div>

　CSS代码：

    .group-img {
        width: 423px;
        height: 480px;
        position: relative;
    }
    
    .group-img a {
        position: absolute;
        display: block;
        text-decoration: none;
        color: #000;
        border: 1px solid transparent;
    }
    
    .group-img a .outer {
        display: block;
        border: 1px solid transparent;
    }
    
    .group-img a .inner {
        display: block;
        width: 100px;
        height: 80px;
        border: 1px solid transparent;
        margin: 3px;
    }
    
    .group-img a .note {
        position: absolute;
        top: 100px;
        left: -9999px;
        background: #BDBDBD;
        width: 106px;
        padding: 5px;
        text-align: center;
        color: #fff;
    }
    
    .group-img .li a {
        top: 100px;
        left: 120px;
    }
    
    .group-img .yao a {
        top: 8px;
        left: 260px;
    }
    
    .group-img a:hover,
    .group-img a:focus {
        border: 1px solid #d4d82d;
    }
    
    .group-img a:hover .outer,
    .group-img a:focus .outer {
        border: 1px solid #00FF7F;
    }
    
    .group-img a:hover .inner,
    .group-img a:focus .inner {
        border: 1px solid #00CED1;
    }
    
    .group-img a:hover .note,
    .group-img a:focus .note {
        left: 0px;
    }

CSS布局需要注意两点将容器的大小和图片的大小保持一致，不显示的文字通过left隐藏文字，鼠标滑动的时候回归正常~