css 怎么写能把 p 标签准确的固定在 img 标签中图片指定像素坐标的位置？! ！不可以直接绘入图片，因为要允许用户选择复制文字！
edis0n0 · 2023-01-10 12:21:43 +08:00 · 2445 次点击这是一个创建于 709 天前的主题，其中的信息可能已经有所发展或是发生改变。
 |
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