CSS-图像映射_html/css

来源：懂视网责编：小采时间：2020-11-27 16:15:43

CSS-图像映射_html/css

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

推荐度：

点击下载本文 文档为doc格式

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

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

Html代码:

   	 	李连杰 
  	 	姚明

　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隐藏文字，鼠标滑动的时候回归正常~

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

CSS-图像映射_html/css

推荐度：

点击下载本文 文档为doc格式

标签：映射图像 html

热门焦点

CSS-图像映射_html/css

CSS-图像映射_html/css

CSS-图像映射_html/css

最新推荐

猜你喜欢

热门推荐