You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在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.

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.27 13:36:03