Question

我需要在图像的右下角显示视频对象的图像。

我试过了：

<h:graphicImage url="#{video.picUrl}" height="30" width="30">
    <h:outputText value="#{video.Length}" />
</h:graphicImage>

但是长度文本显示在图像外部。我怎样才能在图像的右下角找到它？

Answer 1

这是一个纯HTML / CSS问题。首先，您需要了解生成的HTML / CSS应如何实现您的功能需求。例如，以下HTML

<span class="imageWithText">
    <img src="some-video.png" width="30" height="30" />
    <span class="text">123</span>
</span>

使用以下CSS

.imageWithText {
    position: relative;
}
.imageWithText .text {
    position: absolute; 
    bottom: 3px;
    right: 3px; 
    background-color: white;
    font-size: .5em;
}

应该适合你。

你知道，.text相对于.imageWithText，bottom和right 3px绝对定位，因此它可以很好地贴在底部对。

现在，要使用JSF生成相同的HTML，代码应该看起来像

<h:panelGroup styleClass="imageWithText">
    <h:graphicImage value="#{video.picUrl}" height="30" width="30" />
    <h:outputText styleClass="text" value="#{video.length}" />
</h:panelGroup>

相同的CSS是可重复使用的。

显示来自bean的图像，视频属性为“length”

1 个答案: