近來，將錨點(diǎn)放置在響應(yīng)式圖像上的正確位置變得更加重要。因?yàn)槲覀冊谌粘Ｉ钪袝龅胶芏鄰V告，如果錨點(diǎn)沒有正確放置在響應(yīng)式圖像下方，將會使用戶更難以理解該網(wǎng)頁。
我們使用 CSS 和 HTML 將元素錨定到響應(yīng)圖像上的正確位置。在我們深入本文以更好地理解之前，讓我們快速瀏覽一下 HTML 中的錨點(diǎn)和圖像標(biāo)簽。
HTML 中的錨標(biāo)記
通過其 href 屬性，HTML 元素 （或錨元素）生成指向網(wǎng)頁、文件、電子郵件地址、同一頁面上的位置或可以通過 URL 尋址的任何其他內(nèi)容的超鏈接。
每個 應(yīng)包含描述鏈接最終目的地的文本。當(dāng)焦點(diǎn)位于 元素時，按 Enter 鍵將激活 href 屬性（如果存在）。
語法
以下是 HTML 中錨標(biāo)記的語法
<a href = "link"> Link Name </a>
登錄后復(fù)制
HTML <img> 標(biāo)簽
要在網(wǎng)頁或網(wǎng)站中插入圖像，請使用 HTML <img> 標(biāo)記。在現(xiàn)代網(wǎng)站中，圖像使用 <img> 元素鏈接到網(wǎng)頁，該元素包含圖像的空間。這可以防止網(wǎng)站直接向網(wǎng)頁添加圖像。
語法
以下是img標(biāo)簽的語法
<img src="" alt="" width="" height="">
登錄后復(fù)制
要了解有關(guān)將元素錨定到響應(yīng)式圖像上正確位置的更多信息，請查看以下示例
示例
在下面，我們使用 CSS 將元素錨定到響應(yīng)圖像上的正確位置。
<!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>
登錄后復(fù)制
執(zhí)行腳本時，它將生成一個輸出，其中包含上傳到網(wǎng)頁上的圖像以及附加在響應(yīng)圖像底部的相應(yīng)超鏈接。
示例
考慮以下示例，我們將元素的錨點(diǎn)放置在響應(yīng)式圖像上的正確位置。
<!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>
登錄后復(fù)制
運(yùn)行上述腳本時，將彈出輸出窗口，顯示網(wǎng)頁上上傳的圖像以及附加在圖像兩側(cè)的超鏈接，并在超鏈接中應(yīng)用了 CSS。
以上就是如何將元素錨定到響應(yīng)式圖像的正確位置？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
