# 用于图片上的文字的主题组件？

**URL:** https://meta.discourse.org/t/theme-component-for-text-over-pics/365794
**Category:** Support
**Created:** [2025年五月12日 20:44 UTC](https://meta.discourse.org/t/theme-component-for-text-over-pics/365794 "2025-05-12T20:44:30Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [2025年五月12日 20:44 UTC](https://meta.discourse.org/t/theme-component-for-text-over-pics/365794/1 "2025-05-12T20:44:30Z")

</div>

我想知道是否有办法（我搜索过但没找到）将图片放在帖子中，然后在撰写框中直接在其上方添加文字？

这是可以通过组件完成的吗？  
如果你能将两个顶角弄圆，那就更好了。

我知道这可以使用 HTML 和 CSS 来完成，但如果能在设置中将其做得漂亮整洁，那就太酷了。就像你可以选择“Arial Black”、“60px”、“不透明度=90%”、“填充色=#ffffff”、“描边色=#800080”、“位置=左下”  
我不知道你是否能做到所有这些，那只是一个愿望清单。我知道在图片上添加文字是可行的。

然后，当你添加图片时，你可以定义图片的文字，这样你就可以即时创建主题图片横幅了。

> **[W3Schools.com](https://www.w3schools.com/howto/howto_css_image_text.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [2025年五月12日 22:08 UTC](https://meta.discourse.org/t/theme-component-for-text-over-pics/365794/2 "2025-05-12T22:08:11Z")

</div>

你好 tknospdr，

如果我正确理解了你的主题，这个主题组件？不确定它是否能正常工作。

> [@Image Annotator - Allows you to annotate images in the previewer](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936):
>
> Hi everyone, Along with my teammate @vliboolean1010, we’re excited to introduce you to the newly created Discourse Theme-Component, Image Annotator. Whenever you click on the image at the editor, it activates the features of Add boxes, shapes, arrows, and text Highlight or censor parts of the image Select and change the color of the annotations Annotated images will be automatically updated after clicking on the save. Supports browsers including Safari, Firefox, Chrome & iOS Safari (Image cr…

---

<div class="post-metadata">

### Author: ![Andrew\_Rowe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_rowe/32/445877_2.png) [@Andrew\_Rowe](https://meta.discourse.org/u/Andrew_Rowe)
#### Post date: [2025年五月12日 22:23 UTC](https://meta.discourse.org/t/theme-component-for-text-over-pics/365794/3 "2025-05-12T22:23:11Z")

</div>

或者这个？

> [@Watermark Image](https://meta.discourse.org/t/watermark-image/347138):
>
> information_sourceSummary Automatically adds watermarks to user-uploaded imageshammer_and_wrenchRepository [GitHub - Arkshine/discourse-watermark-image](https://github.com/Arkshine/discourse-watermark-image/)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Description This theme component automatically adds watermarks to user-uploaded images. You can use either an image or a QR code as your water…

---

<div class="post-metadata">

### Author: ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [2025年五月12日 23:04 UTC](https://meta.discourse.org/t/theme-component-for-text-over-pics/365794/4 "2025-05-12T23:04:21Z")

</div>

注释目前似乎无法完全正常工作，并且水印只能应用图像，不能用于文本。

不过还是谢谢你，我想我当时没有使用正确的搜索词。

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [2025年五月13日 18:01 UTC](https://meta.discourse.org/t/theme-component-for-text-over-pics/365794/5 "2025-05-13T18:01:36Z")

</div>

🫤 哎呀。我想过要推荐它，但正如我提到的，我不确定它的状态如何。

如果您找不到所需的内容，还有两种选择。

1. 尝试构建自己的主题组件。这里有 Meta 上的指南：[https://meta.discourse.org/t/developing-discourse-themes-theme-components/93648](https://meta.discourse.org/t/developing-discourse-themes-theme-components/93648)。

2. 假设您有预算，您可以在 #Marketplace 类别中询问是否有人愿意为您构建一些东西。

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2025年五月13日 20:21 UTC](https://meta.discourse.org/t/theme-component-for-text-over-pics/365794/6 "2025-05-13T20:21:04Z")

</div>

> [@tknospdr](#):
>
> 水印只能应用图像，不能用于文本。

您可以创建一个带有文本的图像。您有许多工具可以在几秒钟内制作一个。

> [@Arkshine](#):
>
> **为什么不支持文本水印？**
> 
> _文本水印需要广泛的配置选项（字体选择、样式等），如果没有专用界面，这些选项很难有效地实现。图像水印提供了更大的灵活性，并且可以使用现有的设计工具创建。_

---

<div class="post-metadata">

### Author: ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [2025年五月13日 20:24 UTC](https://meta.discourse.org/t/theme-component-for-text-over-pics/365794/7 "2025-05-13T20:24:44Z")

</div>

> [@Arkshine](#):
>
> 你可以创建一个带文字的图片。你有许多工具可以在几秒钟内完成。

我知道了，谢谢。我有很多工具可以在 Discourse 之外处理这项任务。我只是希望有一站式服务。  
没什么大不了的，感谢所有建议。

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2025年五月13日 20:33 UTC](https://meta.discourse.org/t/theme-component-for-text-over-pics/365794/8 "2025-05-13T20:33:58Z")

</div>

注释目前似乎未完全正常工作

您遇到了什么问题？您可能想报告一下。我敢肯定有人会修复该组件。

编辑：我快速测试了一下，该组件对我来说可以正常工作。但是，对于文本来说，其功能非常有限。
