css 怎么写能把 p 标签准确的固定在 img 标签中图片指定像素坐标的位置？! ！不可以直接绘入图片，因为要允许用户选择复制文字！

2023-01-10 12:21:43 +08:00
 edis0n0
2390 次点击
所在节点    程序员
27 条回复
renmu
2023-01-10 12:29:15 +08:00
父标签设置为 relative ，p 标签设置为 absolute ，然后你就随便移动了
edis0n0
2023-01-10 12:42:07 +08:00
@renmu #1 但是图片的大小是可以改变的，这样还要自己监听窗口大小变动遍历更新每一个 p 标签的位置
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>
edis0n0
2023-01-10 13:08:33 +08:00
@zjsxwc #3 但我的场景下图的宽度是浏览器宽度 calc(100vw - 40px)，用户拉伸浏览器需要自己处理坐标缩放
Felldeadbird
2023-01-10 13:10:11 +08:00
1 楼方法就没错了。 你图片大小怎么变化，P 标签都是的定位都是跟着父类元素去的。你加上 top, left,right,bottom 就可以了。
zjsxwc
2023-01-10 13:13:08 +08:00
@edis0n0 #imagediv 的 width 改成 100%这种百分数不就跟着浏览器窗口变了嘛
edis0n0
2023-01-10 13:16:42 +08:00
@zjsxwc #6 然后图片缩放了，p 标签还在缩放前的坐标。预期的效果是 p 标签的坐标也需要自动缩放。
JohnH
2023-01-10 13:23:45 +08:00
图片始终按照浏览器宽度来显示时，主要考虑的就是 p 标签的显示。
目前来看文字有 2 个问题：
1.文字位置：首次显示时，将其坐标、宽度换算为百分比
2.缩放问题：使用 vw 来控制文字大小，其中的换算可以找找参考
如此实现相当于变成响应式了，只有首次显示时做一次处理，后续不需要再考虑缩放
zjsxwc
2023-01-10 13:28:15 +08:00
@edis0n0 明白你的意思了，你是要文字也跟着缩小放大？还是文字的位置是跟着图片缩小放大？
edis0n0
2023-01-10 13:31:20 +08:00
@zjsxwc #9 主要是需要实现文字的位置是跟着图片缩小放大，能一并实现文字也跟着缩小放大当然更好，目前在尝试#8 的做法
yaphets666
2023-01-10 13:47:19 +08:00
了解下 fabric ，文字选择复制等等之类的全部都可以通过 canvas 实现
aaron00101010
2023-01-10 14:08:10 +08:00
绝对定位考虑使用百分比为单位，或者坐标乘以图片缩放系数
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%);
wangtian2020
2023-01-10 14:22:49 +08:00
给图片添加 ResizeObserver 监听宽高变化，即时更新文字的 css
https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver
Huelse
2023-01-10 14:26:22 +08:00
需要点 js 才能完美实现吧，可以参考这个 https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/
zhaol
2023-01-10 15:20:40 +08:00
用 rem 控制 p 标签的位置，以及文字大小
otakustay
2023-01-10 15:27:35 +08:00
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)

万能居中大法
codehz
2023-01-10 15:30:02 +08:00
所以实际上是图片坐标系的“像素位置”而不是页面的“像素位置”对吧
那，直接用百分比坐标不就可以了，换算一下图片实际尺寸和标记的位置到百分比（不过我觉得可能会有文字溢出图片大小的问题，但这需求下大概是无法避免的）
xujianxing
2023-01-10 15:37:17 +08:00
你这应该不是固定的像素位置，而是对应的百分比像素值
gengliangcais
2023-01-10 15:50:31 +08:00
绝对定位

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/907868

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX