如何用CSS/HTML把文本放在图像上一个固定的,响应的位置?[复制]

kqqjbcuj  于 2022-12-20  发布在  其他
关注(0)|答案(3)|浏览(129)
    • 此问题在此处已有答案**:

Text over image - responsive(1个答案)
9小时前关门了。
我需要把一些文字在一个图像上的一个特定位置。我希望文字留在原地&减少其字体大小时,视口缩小。像这样:

文本必须位于水平绿线的正上方,并且必须接触右侧的黄线。
这是我的代码:

<style>
        #hero img {
            width: 100%;
        }

        #motto {
            position: absolute;
            bottom: 272px;
            right: 360px;
            font-size: 59px;
        }
    </style>

    <div id="hero">
        <img src="image.jpg">
        <div id="motto">This is my long, long text</div>
    </div>

文本初始位置正确,但当我缩小视口时,它变成了香蕉

我也试过font-size: 5vw,字体大小似乎缩小了,但并没有保持不变。
如果可能的话,我想保留<img>而不使用background-image。其他任何方法都可以。
谢啦,谢啦
有人建议看一下Text over image - responsive,我看了(实际上我在发布之前就已经看过了),但它并没有按照我需要的方式工作(字体大小是固定的,并且不会缩小,这是这里的主要问题)。答案(自适应)编码是

<style>
        img {
    display: block;
    width: 100%;
}

.thumbnail {
    position: relative;
    display: inline-block;
}

.caption {
    position: absolute;
    top: 77%;
    left: 66%;
    transform: translate( -50%, -50% );
    text-align: center;
    color: white;
    font-weight: bold;
}
    </style>

    <div id="box-search">
        <div class="thumbnail">
            <img src="image.jpg" alt="">
            <div class="caption">
                <p>This is my long, long text</p>
            </div>
        </div>
    </div>

结果是这样的:

8yparm6h

8yparm6h1#

React+固定位置(像素)不会一起工作。
如果你想让某个东西React灵敏,那么定位也必须如此,你会希望使用%vw/vh,而不是px
不幸的是,没有你的图片,所以借用了第二张图片从您的职位来演示(所以忽略第二个“这是我的长,长文本”)。

#hero {
  position: relative;
}

#hero img {
  width: 100%;
}

#motto {
  position: absolute;
  bottom: 26%;
  right: 27%;
  font-size: 5vw; /** responsive font-size **/
}
<div id="hero">
  <img src="https://i.stack.imgur.com/r0twu.jpg">
  <div id="motto">This is my NEW long, long text</div>
</div>
wnavrhmk

wnavrhmk2#

<style>
    #hero img {
        width: 100%;
    }

    #motto {
        position: relative;
        bottom: 272px;
        right: 0px;
        font-size: 5vw;
    }
</style>
<div id="hero">
    <img src="https://joshuakosamu.netlify.app/assets/img/jdslk/logos/icons/logo1.png">
    <div id="motto">This is my long, long text</div>
</div>

问题:
首先,要使文本保持在相对于图像不断变化的大小的理想位置,需要一些复杂的css转换,这是因为你试图使文本不断跟踪图像上的一个位置,而它对此一无所知,也不知道主机设备上不断变化的视点。
解决方案1:
为什么不用photoshop处理图片,然后在图片上写上文字呢?这样你的文字就可以随着图片一起调整大小,只要你的文字不是动态的
解决方案二:
通过设置font-size: 5vw;来编辑你的css,就像你已经说过的那样,并且设置position: relative;,这样你的文本可以相对于包含你的图像的<div id="hero">移动一些。
参见随附的代码片段:

3ks5zfa0

3ks5zfa03#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .container{
            position: relative;
            text-align: center;
              color: white;
        }
        .txt{
            position: absolute;
            top: 50%;
          left: 50%;
             transform: translate(-50%, -50%);

        }
    </style>
</head>
<body>
    <div class="container">
        <img src="lady.webp" alt="" srcset="">
         <div class="txt">Full stack developer</div>
    </div>
</body>
</html>

相关问题