近來，將錨點放置在響應式圖像上的正確位置變得更加重要。因為我們在日常生活中會遇到很多廣告，如果錨點沒有正確放置在響應式圖像下方，將會使用戶更難以理解該網頁。
我們使用 CSS 和 HTML 將元素錨定到響應圖像上的正確位置。在我們深入本文以更好地理解之前，讓我們快速瀏覽一下 HTML 中的錨點和圖像標簽。
HTML 中的錨標記
通過其 href 屬性，HTML 元素 （或錨元素）生成指向網頁、文件、電子郵件地址、同一頁面上的位置或可以通過 URL 尋址的任何其他內容的超鏈接。
每個 應包含描述鏈接最終目的地的文本。當焦點位于 元素時，按 Enter 鍵將激活 href 屬性（如果存在）。
語法
以下是 HTML 中錨標記的語法
<a href = "link"> Link Name </a>
登錄后復制
HTML <img> 標簽
要在網頁或網站中插入圖像，請使用 HTML <img> 標記。在現代網站中，圖像使用 <img> 元素鏈接到網頁，該元素包含圖像的空間。這可以防止網站直接向網頁添加圖像。
語法
以下是img標簽的語法
<img src="" alt="" width="" height="">
登錄后復制
要了解有關將元素錨定到響應式圖像上正確位置的更多信息，請查看以下示例
示例
在下面，我們使用 CSS 將元素錨定到響應圖像上的正確位置。
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
display: flex;
width: 60%;
margin: auto;
}
.type {
text-align: center;
}
.tutorial img {
max-width: 90%;
display: block;
}
</style>
<div class="tutorial">
<div class="type">
<img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg">
<a >Java Tutorial</a>
</div>
<div class="type">
<img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg">
<a >HTML Tutorial</a>
</div>
</div>
</body>
</html>
登錄后復制
執行腳本時，它將生成一個輸出，其中包含上傳到網頁上的圖像以及附加在響應圖像底部的相應超鏈接。
示例
考慮以下示例，我們將元素的錨點放置在響應式圖像上的正確位置。
<!DOCTYPE html>
<html>
<body>
<style>
#tutorial{
float:left;
position: relative;
}
#tutorial img {
max-width: 100%;
display: inline-block;
}
a.link1{
height:15%;
width:15%;
position: absolute;
top:60%; left:10%;
display:block;
background:#00FF00 ;
}
a.link2{
height:15%;
width:15%;
position: absolute;
top:50%;
left:76%;
display: block;
background:#FF0000;
}
</style>
<div id="tutorial">
<div>
<img src="https://www.math-english.com/media/dices/two-dices2.png">
</div>
<a class="link1">HTML</a>
<a class="link2">JAVA</a>
</div>
</body>
</html>
登錄后復制
運行上述腳本時，將彈出輸出窗口，顯示網頁上上傳的圖像以及附加在圖像兩側的超鏈接，并在超鏈接中應用了 CSS。
以上就是如何將元素錨定到響應式圖像的正確位置？的詳細內容，更多請關注www.92cms.cn其它相關文章！
