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

标签

img

CSS

图片

27 条回复 • 2023-01-11 19:00:22 +08:00

1

renmu

2023-01-10 12:29:15 +08:00 via Android

父标签设置为 relative ，p 标签设置为 absolute ，然后你就随便移动了

2

edis0n0

OP

2023-01-10 12:42:07 +08:00

@renmu #1 但是图片的大小是可以改变的，这样还要自己监听窗口大小变动遍历更新每一个 p 标签的位置

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

2023-01-10 13:08:33 +08:00

@zjsxwc #3 但我的场景下图的宽度是浏览器宽度 calc(100vw - 40px)，用户拉伸浏览器需要自己处理坐标缩放

5

Felldeadbird

2023-01-10 13:10:11 +08:00

1 楼方法就没错了。你图片大小怎么变化，P 标签都是的定位都是跟着父类元素去的。你加上 top, left,right,bottom 就可以了。

6

zjsxwc

2023-01-10 13:13:08 +08:00

@edis0n0 #imagediv 的 width 改成 100%这种百分数不就跟着浏览器窗口变了嘛

7

edis0n0

OP

2023-01-10 13:16:42 +08:00

@zjsxwc #6 然后图片缩放了，p 标签还在缩放前的坐标。预期的效果是 p 标签的坐标也需要自动缩放。

8

JohnH

2023-01-10 13:23:45 +08:00

图片始终按照浏览器宽度来显示时，主要考虑的就是 p 标签的显示。
目前来看文字有 2 个问题：
1.文字位置：首次显示时，将其坐标、宽度换算为百分比
2.缩放问题：使用 vw 来控制文字大小，其中的换算可以找找参考
如此实现相当于变成响应式了，只有首次显示时做一次处理，后续不需要再考虑缩放

9

zjsxwc

2023-01-10 13:28:15 +08:00

@edis0n0 明白你的意思了，你是要文字也跟着缩小放大？还是文字的位置是跟着图片缩小放大？

10

edis0n0

OP

2023-01-10 13:31:20 +08:00

@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