当前位置: 首页 > 知识库问答 >
问题:

html5 - 图片做背景,如何让上面的标注在改变浏览器大小时候跟着改变位置?

慕鹏
2023-08-22

现在有一张设备图,用来当作背景图片,但是上面很多关键信息,需要通过样式定位在对应位置,但是当改变浏览器大小后,标注的点位就会发生错乱,如何实现该功能?

要求:
希望图片上的标注在任意窗口大小时,标注都在指定位置,如下:

代码如下:

https://codesandbox.io/s/practical-merkle-5tjpkw?file=/index....

共有1个答案

岑俊弼
2023-08-22

标注的top、left按背景图原图大小百分比进行计算,如原图大小为:1024x1080,标注点的位置为:300x160,那么标注的top=(300/1024x100)%left=(160/1080x100)%

 类似资料:
  • 公共视图onCreateView(LayoutInflater inflater、ViewGroup容器、Bundle savedInstanceState){ 但是它崩溃了,错误日志如下所示: 是 我已经在中为添加了init,如下所示: 我的场景是: Activity1-->Activity1-->片段 Splash的XML如下所示: 我有两项活动。片段由activity2调用,我想改变Acti

  • 本文向大家介绍vue动态改变背景图片demo分享,包括了vue动态改变背景图片demo分享的使用技巧和注意事项,需要的朋友参考一下 如下所示: 以上这篇vue动态改变背景图片demo分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍js实现点击图片改变页面背景图的方法,包括了js实现点击图片改变页面背景图的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现点击图片改变页面背景图的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。

  • 本文向大家介绍如何更改浏览器左上角标题旁的图标?相关面试题,主要包含被问及如何更改浏览器左上角标题旁的图标?时的应答技巧和注意事项,需要的朋友参考一下 意思是修改网站图标 此图标应该为一个 .ico 的图标,常为 16*16 / 24 * 24 通过在 html 头部引入如下标签实现:

  • 我需要帮助的java swing为GUI。我已经包含了“frame.getContentPane().setbackground(color.cyan);”到代码,但框架的背景颜色不变?谢谢你。

  • 问题内容: 我一直在尝试在背景图片的顶部使用线性渐变,以使背景底部的阴影效果从黑色变为透明,但似乎无法使其显示。 我在这里阅读了其他案例和示例,但没有一个对我有用。我只能看到渐变或图像,但不能全部看到。 只需单击第一个徽标,就忽略该效果,此后我要尝试的是整个网站的正文。 这是我的CSS代码: 问题答案: 好的,我通过 在行尾 添加背景图片的网址来解决此问题。 这是我的工作代码: