css 怎么写能把 p 标签准确的固定在 img 标签中图片指定像素坐标的位置？! ！不可以直接绘入图片，因为要允许用户选择复制文字！
edisn0 2023-01-10 12:21:43 +08:00 3013 次点击这是一个创建于 1057 天前的主题，其中的信息可能已经有所发展或是发生改变。
 | 1 renmu 2023-01-10 12:29:15 +08:00 via Android 父标签设置为 relative ，p 标签设置为 absolute ，然后你就随便移动了 |
 | 3 zjsxwc 2023-01-10 13:02:54 +08:00 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> |
 | 4 edis0n0 OP @zjsxwc #3 但我的场景下图的宽度是浏览器宽度 calc(100vw - 40px)，用户拉伸浏览器需要自己处理坐标缩放 |
 | 5 Felldeadbird 2023-01-10 13:10:11 +08:00 1 楼方法就没错了。 你图片大小怎么变化，P 标签都是的定位都是跟着父类元素去的。你加上 top, left,right,bottom 就可以了。 |
 | 8 JohnH 2023-01-10 13:23:45 +08:00 图片始终按照浏览器宽度来显示时，主要考虑的就是 p 标签的显示。 目前来看文字有 2 个问题： 1.文字位置：首次显示时，将其坐标、宽度换算为百分比 2.缩放问题：使用 vw 来控制文字大小，其中的换算可以找找参考 如此实现相当于变成响应式了，只有首次显示时做一次处理，后续不需要再考虑缩放 |
| 10 edis0n0 OP @zjsxwc #9 主要是需要实现文字的位置是跟着图片缩小放大，能一并实现文字也跟着缩小放大当然更好，目前在尝试#8 的做法 |
 | 11 yaphets666 2023-01-10 13:47:19 +08:00 了解下 fabric ，文字选择复制等等之类的全部都可以通过 canvas 实现 |
 | 12 aaron00101010 2023-01-10 14:08:10 +08:00 绝对定位考虑使用百分比为单位，或者坐标乘以图片缩放系数 |
 | 13 wangtian2020 2023-01-10 14:18:59 +08:00 p 标签和 img 标签都 position absolute 脱离文档流，让它们的左上角重叠 给 p 标签添加神奇的 transform: translate css 属性，以 img 左上角为起始点偏移 transform: translate(X px, Y px); transform: translate(50%, 50%); |
| 14 wangtian2020 2023-01-10 14:22:49 +08:00 给图片添加 ResizeObserver 监听宽高变化，即时更新文字的 css https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver |
 | 15 Huelse 2023-01-10 14:26:22 +08:00 需要点 js 才能完美实现吧，可以参考这个 https://css-tricks.com/scaled-proportional-blocks-with-css-and-Javascript/ |
 | 16 zhaol 2023-01-10 15:20:40 +08:00 用 rem 控制 p 标签的位置，以及文字大小 |
 | 17 otakustay 2023-01-10 15:27:35 +08:00 position: absolute top: 50% left: 50% transform: translate(-50%, -50%) 万能居中大法 |
 | 18 codehz 2023-01-10 15:30:02 +08:00 via iPhone 所以实际上是图片坐标系的“像素位置”而不是页面的“像素位置”对吧 那，直接用百分比坐标不就可以了，换算一下图片实际尺寸和标记的位置到百分比（不过我觉得可能会有文字溢出图片大小的问题，但这需求下大概是无法避免的） |
 | 19 xujianxing 2023-01-10 15:37:17 +08:00 你这应该不是固定的像素位置，而是对应的百分比像素值 |
 | 20 gengliangcais 2023-01-10 15:50:31 +08:00 绝对定位 |
 | 21 caooooooooo 2023-01-10 17:41:57 +08:00 position: absolute 百分比就行了 |
 | 23 supertan 2023-01-10 19:13:04 +08:00 canvas 绘制，然后文字绑定复制的事件。 简单的就是点击文字就自动复制，显得牛逼一点就选中效果模拟，然后快捷键复制以及右键复制 |
| 24 supertan 2023-01-10 19:20:25 +08:00 svg |
 | 25 signalas1 2023-01-10 21:45:38 +08:00 使用百分比，或者使用绝对值 px 然后监听窗口 resize 重新计算 |
 | 26 TomVista 2023-01-11 10:09:16 +08:00 position:absolute; top:100rem left rem |
 | 27 KisekiRemi 2023-01-11 19:00:22 +08:00 一般来说绝对定位能搞定，如果涉及到图片尺寸变化导致文字尺寸变形的话要么 vwvhrem ，要么上 canvas 吧 如果还有更多要求，pixi 可以给你解决，pixi.Text(..., options)options 里有 interactive 开启 |
Select Language