如何优化Gradio界面：添加通栏顶部横幅与水印？

一、添加顶部通栏公司横幅 #

借助Gradio的HTML组件配合自定义CSS，可轻松实现全屏通栏横幅，步骤如下：

1. 编写包含公司标识、名称的横幅HTML结构；
2. 使用Blocks模式构建界面（比Interface更适配自定义布局），将横幅组件放在界面最顶部；
3. 通过自定义CSS设置横幅的全屏宽度、品牌样式，必要时添加固定定位避免滚动时遮挡。

示例代码：

import gradio as gr

# 定义公司横幅的HTML内容
company_banner = """
<div class="company-banner">
    <img src="https://your-company-logo.png" alt="公司Logo" class="banner-logo">
    <span class="banner-text">XX公司AI模型演示平台</span>
</div>
"""

# 自定义CSS样式
custom_css = """
.company-banner {
    width: 100%;
    background-color: #2c3e50;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.banner-logo {
    height: 40px;
    width: auto;
}
.banner-text {
    font-size: 18px;
    font-weight: 600;
}
/* 避免内容被固定横幅遮挡 */
#component-0 {
    margin-top: 64px;
}
"""

# 构建演示界面
with gr.Blocks(css=custom_css) as demo:
    # 插入顶部横幅
    gr.HTML(company_banner)
    
    # 以下是模型演示的核心组件示例
    with gr.Row():
        input_box = gr.Textbox(label="输入待处理文本")
        output_box = gr.Textbox(label="模型输出结果")
    run_btn = gr.Button("执行模型推理")
    run_btn.click(lambda x: f"处理完成：{x}", inputs=input_box, outputs=output_box)

demo.launch()

二、添加底层淡入水印 #

通过自定义CSS给页面根容器添加背景水印，保证水印位于底层且不干扰交互操作，具体实现：

在上述custom_css中追加水印相关样式：

/* 页面全局底层水印 */
body {
    background-image: url("https://your-watermark-image.png");
    background-repeat: repeat;
    background-position: center;
    background-opacity: 0.1; /* 调整透明度控制淡入效果 */
    background-size: 200px 200px; /* 自定义水印尺寸 */
}
/* 针对Blocks容器的水印设置（可选） */
.gr-container {
    background-image: url("https://your-watermark-image.png");
    background-repeat: repeat;
    background-position: center;
    background-opacity: 0.08;
    opacity: 0.95; /* 确保内容层清晰可见 */
}

关键提示：

• 替换示例中的图片URL为实际的公司Logo和水印图片路径，本地图片需确保Gradio能正常访问；
• 调整background-opacity值控制水印深浅，0.05-0.15区间的透明度通常能兼顾美观与可读性；
• 若将横幅设为固定定位（添加position: fixed; top: 0; left: 0; z-index: 999;），务必给下方内容添加margin-top避免遮挡。

内容的提问来源于stack exchange，提问作者Hustlin