近来，将锚点放置在响应式图像上的正确位置变得更加重要。因为我们在日常生活中会遇到很多广告，如果锚点没有正确放置在响应式图像下方，将会使用户更难以理解该网页。
我们使用 CSS 和 HTML 将元素锚定到响应图像上的正确位置。在我们深入本文以更好地理解之前，让我们快速浏览一下 HTML 中的锚点和图像标签。
HTML 中的锚标记
通过其 href 属性，HTML 元素 （或锚元素）生成指向网页、文件、电子邮件地址、同一页面上的位置或可以通过 URL 寻址的任何其他内容的超链接。
每个 应包含描述链接最终目的地的文本。当焦点位于 元素时，按 Enter 键将激活 href 属性（如果存在）。
语法
以下是 HTML 中锚标记的语法
HTML ![如何将元素锚定到响应式图像的正确位置？]()
![如何将元素锚定到响应式图像的正确位置？]()
标签
要在网页或网站中插入图像，请使用 HTML 标记。在现代网站中，图像使用
元素链接到网页，该元素包含图像的空间。这可以防止网站直接向网页添加图像。
语法
以下是img标签的语法
要了解有关将元素锚定到响应式图像上正确位置的更多信息，请查看以下示例
示例
在下面，我们使用 CSS 将元素锚定到响应图像上的正确位置。
.tutorial { display: flex; width: 60%; margin: auto; } .type { text-align: center; } .tutorial img { max-width: 90%; display: block; }
执行脚本时，它将生成一个输出，其中包含上传到网页上的图像以及附加在响应图像底部的相应超链接。
示例
考虑以下示例，我们将元素的锚点放置在响应式图像上的正确位置。
#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; }
运行上述脚本时，将弹出输出窗口，显示网页上上传的图像以及附加在图像两侧的超链接，并在超链接中应用了 CSS。
以上就是如何将元素锚定到响应式图像的正确位置？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1552135.html
微信扫一扫 
支付宝扫一扫 
