Streamlit 1.9.0版本如何为应用正确添加背景图片？

Streamlit 1.9.0 调整了前端渲染结构，整个应用可视区域被类名为stApp的div容器完全覆盖，原有代码给原生body标签设置的背景，会被上层stApp容器自带的不透明背景完全挡住，自然无法正常显示。

只需要把CSS选择器从body替换为.stApp，可以额外补充几个属性优化背景显示效果，修改后的完整可运行代码如下：

import base64
import streamlit as st


def get_base64(bin_file):
    with open(bin_file, 'rb') as f:
        data = f.read()
    return base64.b64encode(data).decode()


def set_background(png_file):
    bin_str = get_base64(png_file)
    page_bg_img = '''
    <style>
    .stApp {
        background-image: url("data:image/png;base64,%s");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    </style>
    ''' % bin_str
    st.markdown(page_bg_img, unsafe_allow_html=True)

# 注意：这个调用要放在st.set_page_config()语句之后
set_background('./images/background.png')

如果替换选择器后背景还是不显示，逐一核对以下常见问题：

• 图片路径错误：确认运行streamlit命令时的工作目录，和./images/background.png的相对路径完全匹配，不要放错文件夹
• 图片格式不匹配：如果你的背景图是jpg/jpeg格式，需要把data URI里的image/png改成image/jpeg，格式不匹配会导致图片解析失败
• 调用顺序错误：set_background()必须在st.set_page_config()之后调用，提前执行会导致样式注入失效。

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