CSS-图像映射

简介:

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

 

Html代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 博客园-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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
.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隐藏文字,鼠标滑动的时候回归正常~

本文转自Fly_Elephant博客园博客,原文链接:http://www.cnblogs.com/xiaofeixiang/p/5039018.html,如需转载请自行联系原作者


相关文章
|
2月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
|
2月前
|
Web App开发 存储 数据可视化
编程笔记 html5&css&js 029 HTML图像
编程笔记 html5&css&js 029 HTML图像
|
7月前
|
前端开发 JavaScript
使用 JavaScript 和 CSS 的简单图像放大镜
使用 JavaScript 和 CSS 的简单图像放大镜
83 0
|
Web App开发 前端开发
通过外部CSS或嵌入式样式缩放时,Firefox会使图像模糊
通过外部CSS或嵌入式样式缩放时,Firefox会使图像模糊
|
编解码 前端开发
2023年你应该需要知道的CSS新特性-图形与图像
前一段时间State of CSS发起了2022年的调查问卷,该文件的内容主要是CSS新特性、框架、工具库的使用情况,这里我将会用几篇文章整理一下这个问卷中涉及到的新特性
130 0
|
人工智能 前端开发
纯css车牌倾斜矫正的方法 css图像透视变换
纯css车牌倾斜矫正的方法 css图像透视变换
210 0
纯css车牌倾斜矫正的方法 css图像透视变换
|
前端开发 iOS开发 Windows
【网页前端】CSS样式表进阶之图像的灵活使用与拓展知识(二)
本期主要介绍CSS样式表进阶之图像的灵活使用与拓展知识
117 0
【网页前端】CSS样式表进阶之图像的灵活使用与拓展知识(二)
|
前端开发
【网页前端】CSS样式表进阶之图像的灵活使用与拓展知识(一)
本期主要介绍CSS样式表进阶之图像的灵活使用与拓展知识
99 0
【网页前端】CSS样式表进阶之图像的灵活使用与拓展知识(一)
|
前端开发
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
web前端学习(三十)——CSS3图像透明/不透明、拼合技术的相关设置
|
前端开发
用CSS设置颜色、背景和图像效果
用CSS设置颜色、背景和图像效果
299 0
用CSS设置颜色、背景和图像效果