V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
edis0n0
V2EX  ›  程序员

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

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

    万能居中大法
    codehz
        18
    codehz  
       2023-01-10 15:30:02 +08:00 via iPhone
    所以实际上是图片坐标系的“像素位置”而不是页面的“像素位置”对吧
    那,直接用百分比坐标不就可以了,换算一下图片实际尺寸和标记的位置到百分比(不过我觉得可能会有文字溢出图片大小的问题,但这需求下大概是无法避免的)
    xujianxing
        19
    xujianxing  
       2023-01-10 15:37:17 +08:00
    你这应该不是固定的像素位置,而是对应的百分比像素值
    gengliangcais
        20
    gengliangcais  
       2023-01-10 15:50:31 +08:00
    绝对定位
    caooooooooo
        21
    caooooooooo  
       2023-01-10 17:41:57 +08:00
    position: absolute 百分比就行了
    Ritr
        22
    Ritr  
       2023-01-10 18:11:38 +08:00
    @otakustay 17 楼说得对,用 css 的 transform 就可以解决缩放
    supertan
        23
    supertan  
       2023-01-10 19:13:04 +08:00
    canvas 绘制,然后文字绑定复制的事件。

    简单的就是点击文字就自动复制,显得牛逼一点就选中效果模拟,然后快捷键复制以及右键复制
    supertan
        24
    supertan  
       2023-01-10 19:20:25 +08:00
    svg
    signalas1
        25
    signalas1  
       2023-01-10 21:45:38 +08:00
    使用百分比,或者使用绝对值 px 然后监听窗口 resize 重新计算
    TomVista
        26
    TomVista  
       2023-01-11 10:09:16 +08:00
    position:absolute; top:100rem left rem
    KisekiRemi
        27
    KisekiRemi  
       2023-01-11 19:00:22 +08:00
    一般来说绝对定位能搞定,如果涉及到图片尺寸变化导致文字尺寸变形的话要么 vwvhrem ,要么上 canvas 吧
    如果还有更多要求,pixi 可以给你解决,pixi.Text(..., options)options 里有 interactive 开启
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1247 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 146ms · UTC 17:57 · PVG 01:57 · LAX 10:57 · JFK 13:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.