时间戳

首页 > 解决方案 > Vaadin - 在图像顶部添加文本

java - Vaadin - 在图像顶部添加文本

问题描述

我正在使用 Vaadin 构建自定义布局，并且我有充当按钮的图像（带有 clicklistener）。但是我还需要显示一些文本，我想在图像上显示它，所以真的在图像内部。这可能吗？如果可以，怎么做？

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

标签： javavaadinvaadin7

解决方案

但是我还需要显示一些文本，我想在图像上显示它，所以真的在图像内部。这可能吗？如果可以，怎么做？

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

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

推荐阅读