举例说明一下：
<img src="路径" usemap="#pic" />
<!--以上插入，并调取下面的<map>元素中的ID标识，这很重要-->
<map name="pic" id="pic">
<area shape="rect" coords="20,30,40,50" href="链接路径" />
<!--以上是一个方形区域，请自行更改coords中4个坐标值-->
</map>
<div style="widith:300px;height:200px;background:url('背景地址') no-repeat center center;background-size:cover;">
</div>
为了方便，就用你提供的吧无非就是一次加载，到客户端，提高页面访问速度只要需要背景的地方就可以应用，当然，大多数都是修饰按钮等，修饰类用图。不说多余的了，贴代码吧Up to youoh-no {background:#CCC url(
" target="_blank" >
) no-repeat 0 -110px;width:180px;}oh-no2 {margin-top:5%;border:2px dotted #F00;background:#000 url(
" target="_blank" >
) no-repeat -150px -150px;width:100px;height:500px;}-->Test2第一个应用是在按钮上，通过background-position属性中位置的值来进行定位，基本格式是background:#颜色值 url(地址) 重复与否 2个位置值 background:#000 url(//nonejpg) no-repeat right left;其中right和left的位置就是你想要的答案。如果是简单的想背景图居左就是left，上就是top依次类推，但常用的是通过数值，按照X和Y轴进行定位。最重要的一步就是值的设定，再准确点，就是负值的设置。通过负值，才能使向上推移，到达你想显示的部分。说的有点繁琐，还不太明白的话，可以百度消息
可以使用以下几种方式：
1、相对定位方式，设置的position属性为relative，然后设置left top属性为负数，做到显示中间区域，外层标签要设置overflow属性为hidden不然会撑大。
2、把当做背景使用，然后设置背景居中或者手工填写位置。
3、使用margin属性，外层标签要设置overflow属性为hidden不然会撑大。
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 40 Transitional//EN"><html>
<head>
<title></title>
<style>
div1{
width:300px;
height:400px;
border:1px solid #4EC83B;
overflow: hidden;
}
div1 img {
position: relative;
left: -100px;
top: -150px;
}
</style>
</head>
<body>
<div style="float:left;margin:10px;">
第一种
<div class="div1">
<img src="img1jpg" width="500" height="700" alt="" />
</div>
</div>
<div style="float:left;margin:10px;">
第二种
<div style="width:300px;height:400px;background-image:url(img1jpg);background-repeat: no-repeat;background-position:center center;border:1px solid #4EC83B;">
</div>
</div>
<div style="float:left;margin:10px;">
第三种
<div style="width:300px;height:400px;border:1px solid #4EC83B; overflow: hidden;">
<img src="img1jpg" width="500" height="700" style="margin:-150px -100px;" />
</div>
</div>
</body>
</html>
效果如下：
background:url(aajpg) no-repeat left top;//不重复
background:url(aajpg) repeat-x left top;//横向重复
background:url(aajpg) repeat-y left top;//纵向重复
background:url(aajpg) repeat left top;//横向纵向都重复
以上就是关于css如何让一张图片的某一部分可以点击，map标签如何使用，麻烦大神解释一下全部的内容，包括:css如何让一张图片的某一部分可以点击，map标签如何使用，麻烦大神解释一下、用css截取图片的问题、css+div截取背景图片中相应图片等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）