streamlit设置sidebbar和页面背景

原创已于 2024-01-16 14:39:05 修改 · 5.1k 阅读

48 ·

CC 4.0 BY-SA版权

文章标签：

#streamlit #python

于 2024-01-16 14:35:55 首次发布

本文介绍了如何使用Streamlit1.29.0版本为应用程序设置自定义的sidebar和主页面背景，通过Base64编码实现图片背景的动态应用。

streamlit==1.29.0

1. 设置sidebar背景

代码：

import base64
import streamlit as st

def sidebar_bg(side_bg):

   side_bg_ext = 'png'

   st.markdown(
      f"""
      <style>
      [data-testid="stSidebar"] > div:first-child {{
          background: url(data:image/{side_bg_ext};base64,{base64.b64encode(open(side_bg, "rb").read()).decode()});
      }}
      </style>
      """,
      unsafe_allow_html=True,
      )

#调用
sidebar_bg('./pics/background1.jpg')

效果：

2. 设置页面背景

代码：

def main_bg(main_bg):
    main_bg_ext = "png"
    st.markdown(
        f"""
         <style>
         .stApp {{
             background: url(data:image/{main_bg_ext};base64,{base64.b64encode(open(main_bg, "rb").read()).decode()});
             background-size: cover
         }}
         </style>
         """,
        unsafe_allow_html=True
    )

#调用
main_bg('./pics/background.jpg')

效果：