请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 1218 days ago, the information mentioned may be changed or developed.
 | 1 renmu Jan 10, 2023 via Android 父标签设置为 relative ，p 标签设置为 absolute ，然后你就随便移动了 |
 | 3 zjsxwc Jan 10, 2023 1 楼的办法可行的，图片作为某个 div 的背景图，把文本套这个 div 内，文本设置为 absolute ，就好了。 <!DOCTYPE html> <html> <head> <style> #imagediv { background-image: url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=423474926,1801248814&fm=179&app=35&f=PNG?w=518&h=136&s=ADFEEB16D210A1925C7BF2EA0300E03E"); background-repeat: no-repeat; background-size: 100%; width: 300px; height: 200px; position: relative; } p { position: absolute; top: 10px; left:10px; margin: 0; border: 0; padding: 0; } </style> </head> <body> <div id="imagediv"><p>Hello World!</p></div> </body> </html> |
 | 5 Felldeadbird Jan 10, 2023 1 楼方法就没错了。 你图片大小怎么变化，P 标签都是的定位都是跟着父类元素去。你加上 top, left,right,bottom 就可以了。 |
 | 8 JohnH Jan 10, 2023 图片始终按照浏览器宽度来显示时，主要考虑的就是 p 标签的显示。 目前来看文字有 2 个问题： 1.文字位置：首次显示时，将其坐标、宽度换算为百分比 2.缩放问题：使用 vw 来控制文字大小，其中的换算可以找找参考 如此实现相当于变成响应式了，只有首次显示时做一次处理，后续不需要再考虑缩放 |
 | 11 yaphets666 Jan 10, 2023 了解下 fabric ，文字选择复制等等之类的全部都可以通过 canvas 实现 |
 | 12 aaron00101010 Jan 10, 2023 绝对定位考虑使用百分比为单位，或者坐标乘以图片缩放系数 |
 | 13 wangtian2020 Jan 10, 2023 p 标签和 img 标签都 position absolute 脱离文档流，让它们的左上角重叠 给 p 标签添加神奇的 transform: translate css 属性，以 img 左上角为起始点偏移 transform: translate(X px, Y px); transform: translate(50%, 50%); |
| 14 wangtian2020 Jan 10, 2023 给图片添加 ResizeObserver 监听宽高变化，即时更新文字的 css https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver |
 | 15 Huelse Jan 10, 2023 需要点 js 才能完美实现吧，可以参考这个 https://css-tricks.com/scaled-proportional-blocks-with-css-and-Javascript/ |
 | 16 zhaol Jan 10, 2023 用 rem 控制 p 标签的位置，以及文字大小 |
 | 17 otakustay Jan 10, 2023 position: absolute top: 50% left: 50% transform: translate(-50%, -50%) 万能居中大法 |
 | 18 codehz Jan 10, 2023 via iPhone 所以实际上是图片坐标系的“像素位置”而不是页面的“像素位置”对吧 那，直接用百分比坐标不就可以了，换算一下图片实际尺寸和标记的位置到百分比（不过我觉得可能会有文字溢出图片大小的问题，但这需求下大概是无法避免的） |
 | 19 xujianxing Jan 10, 2023 你这应该不是固定的像素位置，而是对应的百分比像素值 |
 | 20 gengliangcais Jan 10, 2023 绝对定位 |
 | 21 caooooooooo Jan 10, 2023 position: absolute 百分比就行了 |
 | 23 supertan Jan 10, 2023 canvas 绘制，然后文字绑定复制的事件。 简单的就是点击文字就自动复制，显得牛逼一点就选中效果模拟，然后快捷键复制以及右键复制 |
| 24 supertan Jan 10, 2023 svg |
 | 25 signalas1 Jan 10, 2023 使用百分比，或者使用绝对值 px 然后监听窗口 resize 重新计算 |
 | 26 TomVista Jan 11, 2023 position:absolute; top:100rem left rem |
 | 27 KisekiRemi Jan 11, 2023 一般来说绝对定位能搞定，如果涉及到图片尺寸变化导致文字尺寸变形的话要么 vwvhrem ，要么上 canvas 吧 如果还有更多要求，pixi 可以给你解决，pixi.Text(..., options)options 里有 interactive 开启 |
Select Language