JEditorPane 内图像上的文本答案

【问题标题】：Text over an image inside a JEditorPaneJEditorPane 内图像上的文本
【发布时间】：2020-03-20 04:21:12
【问题描述】：

有什么方法可以在JEditorPane 中添加带有文本覆盖的图像？

以下应该起作用的标记：

<html>
<head>

<div width='150' height='150' style='position: relative;'>
  <img src='img_snow_wide.jpg' style='width: 100%; height: 100%; object-fit: cover;' />
  <div style='position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);'>
    BLAH
  </div>
</div>

</body>
</html>

当用作JEditorPane（键入"text/html"）的文本时不起作用。

【问题讨论】：

Swing HTML 支持不是很完整。它只支持 HTML 3.2（我相信）。
@camickr，非常感谢您提供的信息：D

标签： java html css swing jeditorpane

【解决方案1】：

虽然 camickr 是正确的（主要是 - Swing HTML 渲染支持 HTML 3.2 的子集），但它对 CSS 的有限支持让您失望。

此 HTML/CSS 有效。

String html = 
        "<html>"
        + "<body>"
        + "<div style='width: 370px; height: 220px; color: white; "
        + "background-image: url(https://i.stack.imgur.com/lxthA.jpg);'>"
        + "<p style='text-align: center;'>Observatory Silhouette!</p>"
        + "</div>"
        + "</body>"
        + "</html>";

【讨论】：

好把戏，@AndrewThompson！我一回到家，我就会尝试这个替代方案：D