响应CSS图像锚定标记-图像映射样式
我一直在一个快速响应的网站上工作，在图像地图方面遇到了一些问题。图像地图似乎无法使用基于百分比的坐标。 通过谷歌搜索，我找到了一个JS解决方案-。 然而，我希望该网站与JS禁用工作 所以在用尽这些可能性之后，我决定研究在图像上使用相对定位的锚定标记来做同样的事情。无论如何，这是一个更好的选择。 我曾尝试使用基于百分比的位置和大小将锚定标记放置在图像上，但每当我重新缩放浏览器时，锚定标记都会不成比例地移动到图像上 HTML:响应CSS图像锚定标记-图像映射样式,css,image,anchor,responsive-design,imagemap,Css,Image,Anchor,Responsive Design,Imagemap,我一直在一个快速响应的网站上工作，在图像地图方面遇到了一些问题。图像地图似乎无法使用基于百分比的坐标。 通过谷歌搜索，我找到了一个JS解决方案-。 然而，我希望该网站与JS禁用工作 所以在用尽这些可能性之后，我决定研究在图像上使用相对定位的锚定标记来做同样的事情。无论如何，这是一个更好的选择。 我曾尝试使用基于百分比的位置和大小将锚定标记放置在图像上，但每当我重新缩放浏览器时，锚定标记都会不成比例地移动到图像上 HTML: <div id="block"> <div>
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
<a href="#" class="one"></a>
<a href="#" class="two"></a>
</div>
#block img {
max-width: 100%;
display: inline-block;
}
a.one{
height:28%;
width:19%;
top:-36%;
left:1%;
position:relative;
display:block;
}
a.two{
height:28%;
width:19%;
top:37%;
left:36%;
position:absolute;
}
非常感谢您的帮助。绝对定位元素不再是布局的一部分，因此它们无法从其父元素继承相对标注属性。你需要JavaScript来做你想做的事情
禁用JS的人希望体验已经降级。您发布的页面中的CSS有一些问题（以及缺少关闭
div#blockhtml, body {
height: 100%;
}
#block{ float:left; width:100%; max-width: 400px; position: relative; }
#content{
height: 100%;
min-height: 100%;
}
#block img {
max-width: 100%;
display: inline-block;
}
a.one{ height:28%; width:25%; position: absolute; top:55%; left:5%; display:block; background:rgba(0,255,0,0.5);}
a.two{ height:28%; width:25%; position: absolute; top:60%; left:70%; display: block; background:rgba(255,0,0,0.5);}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Bulky Waste</title>
</head>
<body>
<div id="content">
<div id="block">
<div>
<img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png">
</div>
<a href="#" class="one"></a>
<a href="#" class="two"></a>
</div>
</div><!--/content-->
</body>
</html>
大件垃圾
新html需要注意的一件重要事情是
DOCTYPE