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

标签

img

CSS

图片

27 replies • 2023-01-11 19:00:22 +08:00

renmu

Jan 10, 2023 via Android

1

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

edis0n0

OP

Jan 10, 2023

2

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

zjsxwc

Jan 10, 2023

3

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

OP

Jan 10, 2023

4

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

Felldeadbird

Jan 10, 2023

5

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

zjsxwc

Jan 10, 2023

6

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

edis0n0

OP

Jan 10, 2023

7

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

JohnH

Jan 10, 2023

8

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

zjsxwc

Jan 10, 2023

9

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

edis0n0

OP

Jan 10, 2023

10

@zjsxwc #9 主要是需要实现文字的位置是跟着图片缩小放大，能一并实现文字也跟着缩小放大当然更好，目前在尝试#8 的做法

yaphets666

Jan 10, 2023

11

了解下 fabric ，文字选择复制等等之类的全部都可以通过 canvas 实现

aaron00101010

Jan 10, 2023

12

绝对定位考虑使用百分比为单位，或者坐标乘以图片缩放系数

wangtian2020

Jan 10, 2023

13

p 标签和 img 标签都 position absolute 脱离文档流，让它们的左上角重叠
给 p 标签添加神奇的 transform: translate css 属性，以 img 左上角为起始点偏移
transform: translate(X px, Y px);
transform: translate(50%, 50%);

wangtian2020

Jan 10, 2023

14

给图片添加 ResizeObserver 监听宽高变化，即时更新文字的 css
https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver