Vaadin - 在图像顶部添加文本
Vaadin - adding text on top of an image
我正在使用 Vaadin 构建自定义布局，并且我有充当按钮的图像（带有点击监听器）。但是我还需要显示一些文本，我想在图像上显示它，所以真的在图像内部。这可能吗？如果可能，怎么做？
Image dayCourt = new Image(null, new FileResource(new File(basepath + "/VAADIN/images/9_Available_18_Available.png")));
However I also need to display some text and I would like to display it over the image, so inside the image really. Is this possible and if yes, how?
最直接的方法是在 CssLayout 中包裹 Image 和 Label（带有要放置在图像上的文本）。然后您需要将样式名称添加到标签中。在您的主题中，您需要为标签设置 z-index（以便它浮动在图像顶部）（参见：https://www.w3schools.com/cssref/pr_pos_z-index.asp ) and position absolute to Label (see: https://www.w3schools.com/cssref/pr_class_position.asp）相对于 CssLayout
的角
此外，如果您的图像恰好是静态内容，即您不需要动态更改图像，您可以有更简单的解决方案。与其考虑在 CssLayout 中组合两个组件，您可以只有 Label 并将主题资源中的图像设置为 Label 的背景（参见：https://www.w3schools.com/cssref/pr_background-image.asp）。
我正在使用 Vaadin 构建自定义布局，并且我有充当按钮的图像（带有点击监听器）。但是我还需要显示一些文本，我想在图像上显示它，所以真的在图像内部。这可能吗？如果可能，怎么做？
Image dayCourt = new Image(null, new FileResource(new File(basepath + "/VAADIN/images/9_Available_18_Available.png")));
However I also need to display some text and I would like to display it over the image, so inside the image really. Is this possible and if yes, how?
最直接的方法是在 CssLayout 中包裹 Image 和 Label（带有要放置在图像上的文本）。然后您需要将样式名称添加到标签中。在您的主题中，您需要为标签设置 z-index（以便它浮动在图像顶部）（参见：https://www.w3schools.com/cssref/pr_pos_z-index.asp ) and position absolute to Label (see: https://www.w3schools.com/cssref/pr_class_position.asp）相对于 CssLayout
的角此外，如果您的图像恰好是静态内容，即您不需要动态更改图像，您可以有更简单的解决方案。与其考虑在 CssLayout 中组合两个组件，您可以只有 Label 并将主题资源中的图像设置为 Label 的背景（参见：https://www.w3schools.com/cssref/pr_background-image.asp）。