响应式地将元素完全置于背景上

Question

我有三个元素，我想保留在图像响应缩小的相同位置。

.main 
 
{ 
 
\t position: relative; 
 
} 
 

 
.container 
 
{ 
 
\t display: inline; 
 
} 
 

 
.point 
 
{ 
 
\t display: inline; 
 
    position: absolute; 
 
\t max-width: 15%; 
 
\t margin-right: 10px; 
 
\t padding: 3px 7px 3px 5px; 
 
\t font-size: 12px; 
 
\t font-weight: bold; 
 
\t color: #fff; 
 
\t background: #ff0000; 
 
\t border-radius(5px); 
 
\t box-shadow(1px 2px 5px rgba(0,0,0,0.5)); 
 
} 
 

 
.one 
 
{ 
 
\t top: 40%; 
 
\t left: 10%; 
 
} 
 

 
.two 
 
{ 
 
\t top: 50%; 
 
\t left: 40%; 
 
} 
 

 
.three 
 
{ 
 
\t top: 75%; 
 
\t left: 20%; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    <div class="point one">1</div> 
 
    <div class="point two">2</div> 
 
    <div class="point three">3</div> 
 
    </div> 
 
    <img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky"> 
 
</div>

Answer 1

我相信你希望它也能作为缩放图像响应按比例缩小，所以这个如此良好的效果。

.wrapper { 
 
     position: relative; 
 
     display: inline-block; 
 
    } 
 
    
 
    .wrapper img { max-width: 100%; } 
 
    
 
    .point 
 
    { 
 
     position: absolute; 
 
    \t max-width: 15%; 
 
    \t margin-right: 10px; 
 
    \t padding: 3px 7px 3px 5px; 
 
    \t font-size: 12px; 
 
    \t font-weight: bold; 
 
    \t color: #fff; 
 
    \t background: #ff0000; 
 
    \t border-radius(5px); 
 
    \t box-shadow(1px 2px 5px rgba(0,0,0,0.5)); 
 
    } 
 
    
 
    .one 
 
    { 
 
    \t top: 40%; 
 
    \t left: 10%; 
 
    } 
 
    
 
    .two 
 
    { 
 
    \t top: 50%; 
 
    \t left: 40%; 
 
    } 
 
    
 
    .three 
 
    { 
 
    \t top: 75%; 
 
    \t left: 20%; 
 
    }

<div class="main"> 
 
    <span class="wrapper"> 
 
    <img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky"> 
 
    <span class="point one">1</span> 
 
    <span class="point two">2</span> 
 
    <span class="point three">3</span> 
 
    </span> 
 
</div>

我使用inline-block自动允许wrapper元素“包装”图像周围不管形象是什么规模。我还设置了max-width: 100%将图像转换为响应图像（当窗口调整大小时，它只是缩小）。由于这些点都是基于百分比的，所以它们在图像缩小时保持在正确的位置。

✔无要求有一个固定的宽度和高度的图像/包装，所以它的响应
✔减HTML需要
✔作品上，除了不支持旧的

这是一个很好的伎俩我几乎所有的浏览器过去曾经在图像和其他技术上用“横幅”来做东西，以便在图像上定位效果。

Answer 2

让您为相对位置容器，并设置它的高度和宽度，因为你容器的孩子是绝对的。也可以让您的图片绝对positop和顶部0.请参阅片段。

.container 
 
{ 
 
    width: 480px; 
 
    height: 360px; 
 
    position: relative; 
 
    z-index: 100; 
 
\t position: relative; 
 
} 
 
.main img{ 
 
position:absolute; 
 
top:0;} 
 

 
.point 
 
{ 
 
\t display: inline; 
 
    position: absolute; 
 
\t max-width: 15%; 
 
\t margin-right: 10px; 
 
\t padding: 3px 7px 3px 5px; 
 
\t font-size: 12px; 
 
\t font-weight: bold; 
 
\t color: #fff; 
 
\t background: #ff0000; 
 
\t border-radius(5px); 
 
\t box-shadow(1px 2px 5px rgba(0,0,0,0.5)); 
 
} 
 

 
.one 
 
{ 
 
\t top: 40%; 
 
\t left: 10%; 
 
} 
 

 
.two 
 
{ 
 
\t top: 50%; 
 
\t left: 40%; 
 
} 
 

 
.three 
 
{ 
 
\t top: 75%; 
 
\t left: 20%; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    <div class="point one">1</div> 
 
    <div class="point two">2</div> 
 
    <div class="point three">3</div> 
 
    </div> 
 
    <img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky"> 
 
</div>

Answer 3

设置您的img标签的宽度和高度。

.main 
 
{ 
 
\t position: relative; 
 
} 
 

 
.container 
 
{ 
 
\t display: inline; 
 
} 
 

 
.point 
 
{ 
 
\t display: inline; 
 
    position: absolute; 
 
\t max-width: 15%; 
 
\t margin-right: 10px; 
 
\t padding: 3px 7px 3px 5px; 
 
\t font-size: 12px; 
 
\t font-weight: bold; 
 
\t color: #fff; 
 
\t background: #ff0000; 
 
\t border-radius(5px); 
 
\t box-shadow(1px 2px 5px rgba(0,0,0,0.5)); 
 
} 
 

 
.one 
 
{ 
 
\t top: 40%; 
 
\t left: 10%; 
 
} 
 

 
.two 
 
{ 
 
\t top: 50%; 
 
\t left: 40%; 
 
} 
 

 
.three 
 
{ 
 
\t top: 75%; 
 
\t left: 20%; 
 
} 
 
img{ 
 
    width:100%; 
 
    height:100%; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    <div class="point one">1</div> 
 
    <div class="point two">2</div> 
 
    <div class="point three">3</div> 
 
    </div> 
 
    <img src="https://i.ytimg.com/vi/M5SHKCxKDgs/hqdefault.jpg" alt="Husky"> 
 
</div>