如何在Sisense中使用BLOX实现图片叠加文字效果
BLOX横幅文本叠加图片实现方案
- 实现逻辑:你之前的写法是把图片和文本作为同一容器下的平级元素,默认会按流式布局上下排列,要实现叠加效果只需要把图片改为容器的背景图即可,不需要单独声明Image组件,容器内的文本元素会直接浮在背景图上方。
- 可优化调整项:你可以按需调整Container的padding属性控制文本边距,也可以修改TextBlock的horizontalAlignment属性调整文本水平位置,需要半透明白色背景的话可以把文本的background-color改为
rgba(255,255,255,0.8),视觉效果更柔和。
修改后的body代码如下:
"body": [ { "type": "Container", "horizontalAlignment": "center", "backgroundImage": "https://mycompany.com/myimage.png", "padding": "40px 0", "items": [ { "type": "TextBlock", "id": "DashboardTitle", "style": { "color": "#4a0004", "font-weight": "bold", "font-size": 48, "background-color": "white" }, "horizontalAlignment": "center", "class": "", "text": "Customer Review" } ] } ]
内容的提问来源于stack exchange,提问作者David O.
相关产品推荐
相关产品推荐

