響應式地將元素完全置於背景上

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>