如何实现页面内容在固定顶部的背景图下方滚动

Hey there! No worries at all—everyone starts somewhere with HTML/CSS, especially when combining it with frameworks like Streamlit. Let's break down how to fix your background issue and share some useful learning resources.

Solution: Adjust CSS for Fixed Background & Scrollable Content #

The key issue with your current code is that the background is applied to the entire .stApp container, and background-attachment: scroll makes the background move with the content. To fix this, we need to:

1. Fix the background image to the top of the viewport so it stays put when content scrolls
2. Push your main content below the background image so it doesn't overlap
3. Ensure the content area can scroll independently

Here's the modified version of your function:

def set_png_as_page_bg(png_file):
    bin_str = get_base64_of_bin_file(png_file)
    page_bg_img = '''
    <style>
        .stApp {
            background-image: url("data:image/png;base64,%s");
            background-size: contain;
            background-repeat: no-repeat;
            background-attachment: fixed; /* Fix background to viewport */
            background-position: top center; /* Align background to top */
        }

        /* Move main content below the background image */
        .stApp > .main {
            margin-top: 300px; /* Replace with your background image's actual height */
            overflow-y: auto; /* Enable scrolling for content */
            min-height: calc(100vh - 300px); /* Ensure content fills remaining viewport */
        }
    </style>
    ''' % bin_str
    st.markdown(page_bg_img, unsafe_allow_html=True)
    return

Key Changes Explained: #

• background-attachment: fixed: This locks the background image to the browser viewport, so it won't scroll with the rest of the content.
• background-position: top center: Ensures the background image is perfectly aligned to the top of the page.
• margin-top on .main: Adjust this value to match the height of your background image (you can measure it using an image editor or check the image's properties). This pushes all your Streamlit content below the background.
• overflow-y: auto: Makes the content area scrollable when it exceeds the available space.

Learning Resources to Deepen Your Knowledge #

To get more comfortable with these concepts, focus on these areas:

• CSS Background Properties: Master background-attachment, background-position, and background-size through detailed official documentation (like MDN's CSS Backgrounds and Borders module) which includes practical examples of every property in action.
• Streamlit Custom Styling: Check out Streamlit's official docs on custom CSS—they explain how to target the framework's built-in classes (like .stApp and .main) to tweak your app's appearance.
• CSS Positioning: Learn about fixed, relative, and absolute positioning. This is fundamental for controlling how elements behave on the page, especially when dealing with fixed elements and scrolling content.
• Layout Practice: Try building simple layouts like a fixed header with scrollable body—this hands-on exercise will help you apply these concepts quickly.

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