CSS 반응 형 배경 이미지 맵

Question

배경에서 반응 형 이미지 맵을 만들려고합니다. 내가 css 이미지 맵으로 솔루션을 찾고 있었기 때문에 매우 정확할 필요는 없습니다. 내 요구에 맞는 예제를 찾았지만 이미지는 div 안에 배치되어 전체 화면 배경으로 사용합니다. background-size: cover;과 작동 시키려고했지만 이미지 맵이 손상되었습니다. Heres는 전체 코드 :

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> 

Answer 1

, 그럼 난 당신이 페이지의 높이에 문제가있는 것 같아요. IMG를 제거하면 div 요소가 포함되지 않으므로 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/