文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在浏览器中将文本置于图像的具体位置

问如何在浏览器中将文本置于图像的具体位置
EN

Stack Overflow用户

提问于 2022-02-05 13:36:59

回答 1查看 92关注 0票数 0

我将尝试编写一个铬扩展，它从网页上的图像中翻译一个文本，并将其放在页面上的原始文本上。将有简短和分裂的短语(漫画和漫画)。我将使用JS，也希望使用tesseract.js作为OCR。那么，怎样才能把翻译好的文本放在具体的和弦上。我是JS的新手，也许只是很多模特儿？或者只是操纵浏览器DOM，临时插入已经转换的图像。但是许多网站不允许解析图像，是否也有一种方法只扫描浏览器页面？告诉你可能知道的工具，我会检查的。

javascript

html

google-chrome-extension

ocr

回答 1

Stack Overflow用户

发布于 2022-02-05 14:12:40

我不确定这是否正是你想要的，但它可能会帮助你提出更多的后续问题。

我知道你想把文字放在图像上。通常，在浏览器中，元素的定位是用CSS样式操作的。

您可以从JavaScript设置元素样式，但是您应该学习CSS样式，而不需要在JS中设置样式。在您了解了使用JS操作基本CSS样式之后，使用JS操作样式可以是一种策略，但通常最好是使用JS和样式添加元素类属性，而不是直接在DOM树中操作样式。

下面是在CSS中将文本覆盖在图像上的示例：

<html>
  <head>
    <style>
      .img-with-overlay {
        width: 250px;
        height: 250px;
        position: relative;
        background: url('https://source.unsplash.com/random');
        background-size: cover;
      }

      .img-with-overlay p {
        color: white;
        text-shadow: 0px 1px 3px #333;
        text-align: center;
        position: absolute;
        top: calc(50% - 50px);
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <div class="img-with-overlay">
      <p>Hello World</p>
    </div>
  </body>
</html>

为了简单起见，本例使用了style标记，但通常首选外部CSS。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70998543

复制

相似问题

问如何在浏览器中将文本置于图像的具体位置
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在浏览器中将文本置于图像的具体位置EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在浏览器中将文本置于图像的具体位置
EN