首页 > 解决方案 > JEdi​​torPane 内图像上的文本

问题描述

有没有办法添加一个带有文本覆盖的图像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用作(type "text/html")的文本时不起作用。

标签: javahtmlcssswingjeditorpane

解决方案


虽然 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>";

在此处输入图像描述


推荐阅读