Ваадин - добавление текста поверх изображения

Question

Я создаю пользовательский макет с Vaadin, и у меня есть Изображения, которые действуют как кнопки (с clicklistener). Однако мне также нужно отобразить некоторый текст, и я хотел бы отобразить его поверх изображения, так что внутри изображения действительно. Возможно ли это, и если да, то как?

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

Answer 1

Однако мне также нужно отобразить некоторый текст, и я хотел бы отобразить его поверх изображения, так что внутри изображения действительно. Возможно ли это, и если да, то как?

Самый простой способ сделать это - обернуть изображение и метку (текстом, который вы хотите поместить поверх изображения) внутри CssLayout. Затем вам нужно добавить имя стиля на этикетку. В вашей теме вам нужно установить 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).