Vaadin - 在图像上添加文本

Question

我正在使用Vaadin构建自定义布局，并且我将图像用作按钮（使用clicklistener）。但是我还需要显示一些文字，我想在图像上显示它，所以在图像里面真的。这是可能的，如果可以，怎么样？

Image dayCourt = new Image(null, new FileResource(new File(basepath + "/VAADIN/images/9_Available_18_Available.png")));

Answer 1

  

但是我还需要显示一些文字，我想在图像上显示它，所以在图像中真的。这是可能的，如果可以，怎么样？

最直接的方法是在CssLayout中包装Image和Label（带有要放在图像上的文本）。然后，您需要为标签添加样式名称。在您的主题中，您需要为Label设置z-index（以便它浮动在图像顶部）（请参阅：https://www.w3schools.com/cssref/pr_pos_z-index.asp）并将绝对位置设置为Label（参见：https://www.w3schools.com/cssref/pr_class_position.asp）相对于角落CssLayout

此外，如果您的图像恰好是静态内容，即您无需动态更改图像，则可以获得更简单的解决方案。您可以只使用Label并将主题资源中的图像设置为Label的背景（请参阅：https://www.w3schools.com/cssref/pr_background-image.asp），而不是在CssLayout中考虑两个组件的组合。