css 响应式背景图像映射答案

【问题标题】：css responsive background image mapcss 响应式背景图像映射
【发布时间】：2013-11-15 19:45:45
【问题描述】：

我正在尝试从背景制作响应式图像地图。它不必非常精确，所以我一直在寻找带有 css 图像映射的解决方案。我找到了适合我需要的示例，但图像放置在 div 内，我希望它是全屏背景。我试图让它与background-size: cover; 一起工作，但它破坏了图像映射。这是整个代码：

CSS

 html, body {padding:0; margin:0; width:100%; min-height:100%;}
.wrapper {width:100%; height:100%; }
.page {width:100%; margin:0 auto;}
.imageMap {width:100%; position:relative; margin-bottom:200px;}
.imageMap img {display:block; width:100%; }
.imageMap .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}
.imageMap a {display:block; position:absolute; background:#000; z-index:100; opacity:0.2; filter: alpha(opacity=20); border:1px solid transparent; border-radius:10px;}
.imageMap a.p1 {left:11%; top:5%; width:25%; height:34%;}
.imageMap a.p2 {left:76%; top:13%; width:21%; height:30%;}
.imageMap a.p3 {left:5%; top:44%; width:22%; height:42%;}
.imageMap a.p4 {left:28%; top:41%; width:26.5%; height:43%;}
.imageMap a.p5 {left:55%; top:64%; width:15%; height:26%;}
.imageMap a.p6 {left:72%; top:53%; width:25%; height:35%;}
.imageMap a + p {position:absolute; left:0%; top:102%; width:100%; color:#000; display:none;}
.imageMap:hover .hotspots {visibility:visible;}
.imageMap p strong {display:block; padding:0; margin:0; font: bold 25px/30px 'times new roman',serif; color:#000;}
.imageMap p {padding:0; margin:0; font: normal 18px/22px 'times new roman',serif; color:#444;}

.imageMap .hotspots div:hover b {width:0; padding:0;}
.imageMap .hotspots div:hover p {display:block;}
.imageMap .hotspots div:hover a {background:#fff; z-index:100; opacity:0.3; filter: alpha(opacity=30); }

HTML

    <div class="wrapper" onclick="">

        <div class="page">

            <div class="imageMap" aria-haspopup="true">

                <img src="images/bg.jpg" alt="" />

                <div class="hotspots">

                    <div><a href="#" class="p1" rel="nofollow"></a></div>
                    <div><a href="#" class="p2" rel="nofollow"></a></div>
                    <div><a href="#" class="p3" rel="nofollow"></a></div>
                    <div><a href="#" class="p4" rel="nofollow"></a></div>
                    <div><a href="#" class="p5" rel="nofollow"></a></div>
                    <div><a href="#" class="p6" rel="nofollow"></a></div>

                </div>

            </div>

        </div>

    </div>

【问题讨论】：

标签： css background imagemap

【解决方案1】：

如果我正确理解了您的目标，那么我认为您的页面高度存在问题。当您删除 IMG 时，您的 div 会崩溃，因为其中不包含其他块元素。

一种解决方案是为所有相关 div 分配 100% 的高度，包括您的身体。

body {
    width: 100%;
    height: 100%;
    background-image: url('bg.jpg');
    background-size: cover;
}
.wrapper {
    width:100%;
    height:100%;
}
.page {
    width:100%;
    height: 100%;
}
.imageMap {
    width:100%;
    height: 100%;
}

工作示例：http://jsfiddle.net/e3AUx/

【讨论】：