如何在Tkinter窗口添加图片背景并让控件置于上层？

要实现Tkinter窗口添加背景图且控件在上方，最可靠的方式是使用Canvas作为底层容器加载背景图，然后将所有控件放在一个Frame中，再通过Canvas的create_window方法将Frame嵌入Canvas。同时处理窗口大小变化时的图片缩放，以下是修改后的完整方案：

依赖准备 #

首先需要安装PIL库以支持更多图片格式：

pip install pillow

修改后的完整代码 #

import tkinter as tk
import pandas as pd
import io
from tkinter import ttk, filedialog
from PIL import Image, ImageTk

class DataWizard:
    def __init__(self, root):
        self.root = root
        self.root.title("Data Wizard: Automated Data Preprocessing")
        self.root.geometry("800x600")
        
        # 替换为你的背景图片路径
        self.bg_image_path = "background.jpg"
        # 给主窗口设置背景
        self.canvas = self.set_background(root, self.bg_image_path)
        
        # 创建主容器Frame，所有控件放在这个Frame里
        self.main_frame = tk.Frame(self.canvas, bg='white', bd=0)
        self.canvas.create_window((0, 0), window=self.main_frame, anchor="nw")
        
        # 顶部标题 - 父容器改为main_frame
        self.title_label = tk.Label(self.main_frame, text="Data Wizard: Automated Data Preprocessing", 
                                   font=("Arial", 18), bg='white')
        self.title_label.pack(pady=20)

        # 表格区域框架 - 父容器改为main_frame
        self.table_frame = tk.Frame(self.main_frame, bd=2, relief=tk.GROOVE, bg='white')
        self.table_frame.pack(fill=tk.BOTH, expand=True, padx=20, pady=10)

        # 创建Treeview表格
        self.tree = ttk.Treeview(self.table_frame, selectmode='browse')
        self.tree.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)

        # 垂直滚动条
        scrollbar = ttk.Scrollbar(self.table_frame, orient="vertical", command=self.tree.yview)
        scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
        self.tree.configure(yscrollcommand=scrollbar.set)

        # 底部上传区域框架 - 父容器改为main_frame
        self.bottom_frame = tk.Frame(self.main_frame, bd=2, relief=tk.GROOVE, bg='white')
        self.bottom_frame.pack(fill=tk.X, padx=20, pady=10)

        self.upload_label = tk.Label(self.bottom_frame, text="Upload CSV file", font=("Arial", 12), bg='white')
        self.upload_label.pack(side=tk.LEFT, padx=10, pady=10)

        self.upload_button = tk.Button(self.bottom_frame, text="Browse", command=self.upload_csv)
        self.upload_button.pack(side=tk.RIGHT, padx=10, pady=10)

        # 下一步按钮框架 - 父容器改为main_frame
        self.new_frame = tk.Frame(self.main_frame, bd=0, relief=tk.GROOVE, bg='white')
        self.new_frame.pack(fill=tk.X, padx=20, pady=10)
        
        self.new_window_button = tk.Button(self.new_frame, text="Next", command=self.open_new_window)
        self.new_window_button.pack(side=tk.RIGHT, padx=10, pady=10)
        
        # 绑定窗口大小变化事件，更新背景和Frame尺寸
        self.root.bind("<Configure>", self.on_window_resize)

    def set_background(self, window, image_path):
        """给指定窗口设置背景图的通用方法"""
        # 加载图片并缩放至当前窗口大小
        image = Image.open(image_path)
        self.bg_image = ImageTk.PhotoImage(image.resize((window.winfo_width(), window.winfo_height())))
        
        # 创建Canvas作为底层容器
        canvas = tk.Canvas(window, width=window.winfo_width(), height=window.winfo_height())
        canvas.pack(fill=tk.BOTH, expand=True)
        canvas.create_image(0, 0, image=self.bg_image, anchor="nw")
        
        return canvas

    def on_window_resize(self, event):
        """窗口大小变化时更新背景图和主Frame尺寸"""
        # 重新缩放背景图
        image = Image.open(self.bg_image_path)
        self.bg_image = ImageTk.PhotoImage(image.resize((event.width, event.height)))
        self.canvas.delete("all")
        self.canvas.create_image(0, 0, image=self.bg_image, anchor="nw")
        # 更新Canvas和主Frame尺寸
        self.canvas.config(width=event.width, height=event.height)
        self.canvas.create_window((0, 0), window=self.main_frame, anchor="nw")
        self.main_frame.config(width=event.width, height=event.height)

    def upload_csv(self):
        file_path = filedialog.askopenfilename(filetypes=[("CSV files", "*.csv")])

        if file_path:
            self.df = pd.read_csv(file_path)
            self.tree["columns"] = list(self.df.columns)

            for col in self.df.columns:
                self.tree.heading(col, text=col.title())
                self.tree.column(col, width=len(str(self.df[col].max())), anchor=tk.CENTER)

            for i, row in self.df.iterrows():
                self.tree.insert("", "end", values=list(row))

            self.upload_label.config(text=file_path)

            # 添加水平滚动条
            horizontal_scrollbar = ttk.Scrollbar(self.table_frame, orient="horizontal", command=self.tree.xview)
            horizontal_scrollbar.pack(side=tk.BOTTOM, fill=tk.X)
            self.tree.configure(xscrollcommand=horizontal_scrollbar.set)

    def open_new_window(self):
        new_window = tk.Toplevel()
        new_window.title("New Window")
        new_window.state('zoomed')
        
        # 给新窗口设置背景
        self.new_bg_canvas = self.set_background(new_window, self.bg_image_path)
        new_main_frame = tk.Frame(self.new_bg_canvas, bg='white', bd=0)
        self.new_bg_canvas.create_window((0, 0), window=new_main_frame, anchor="nw")

        # 信息文本框 - 父容器改为new_main_frame
        text_widget = tk.Text(new_main_frame, bd=2, relief=tk.GROOVE, width=70, height=20)
        text_widget.grid(row=0, column=0, padx=15, pady=10, sticky="nw")

        # 写入df.info()内容
        with io.StringIO() as stream:
            self.df.info(buf=stream)
            output = stream.getvalue()
            text_widget.insert(tk.END, output)
        text_widget.config(state="disabled")
                
        # 第二个文本框 - 父容器改为new_main_frame
        text_widget2 = tk.Text(new_main_frame, bd=2, relief=tk.GROOVE, width=70, height=22)
        text_widget2.grid(row=1, column=0, padx=15, pady=5, sticky="sw")
             
        # 右侧框架 - 父容器改为new_main_frame
        f = tk.Frame(new_main_frame, bg='white')
        f.grid(row=0, column=1, padx=15, pady=10, rowspan=2, sticky="nsew")

        text_widget3 = tk.Text(f, bd=2, relief=tk.GROOVE, width=80, height=3)
        inputs_frame = tk.Frame(f, bd=2, relief=tk.GROOVE, pady=20, width=text_widget3["width"], bg='white')
        text_widget4 = tk.Text(f, bd=2, relief=tk.GROOVE, width=80, height=24)
        preprocess_button = tk.Button(f, relief=tk.GROOVE, text="Perform Preprocessing", width=10, command=self.preprocess_data)

        text_widget3.pack(side="top", fill="x")
        inputs_frame.pack(side="top", fill="x", pady=10)
        text_widget4.pack(side="top", fill="x", pady=10)
        preprocess_button.pack(side="top", fill="x", pady=10)

        # 输入框区域
        label1 = tk.Label(inputs_frame, text="Label 1:", bg='white')
        label1.grid(row=0, column=0, padx=5, pady=5, sticky="w")
        input1 = tk.Entry(inputs_frame)
        input1.grid(row=0, column=1, padx=5, pady=5, sticky="w")
        
        label2 = tk.Label(inputs_frame, text="Label 2:", bg='white')
        label2.grid(row=1, column=0, padx=5, pady=5, sticky="w")
        input2 = tk.Entry(inputs_frame)
        input2.grid(row=1, column=1, padx=5, pady=5, sticky="w")
        
        add_button = tk.Button(inputs_frame, text="Add", width=10)        
        add_button.grid(row=2, column=0, columnspan=2, pady=10)
        
        # 绑定新窗口大小变化事件
        new_window.bind("<Configure>", lambda e: self.on_toplevel_resize(e, new_main_frame))

    def on_toplevel_resize(self, event, main_frame):
        """处理Toplevel窗口的大小变化"""
        image = Image.open(self.bg_image_path)
        self.bg_image = ImageTk.PhotoImage(image.resize((event.width, event.height)))
        self.new_bg_canvas.delete("all")
        self.new_bg_canvas.create_image(0, 0, image=self.bg_image, anchor="nw")
        self.new_bg_canvas.config(width=event.width, height=event.height)
        self.new_bg_canvas.create_window((0, 0), window=main_frame, anchor="nw")
        main_frame.config(width=event.width, height=event.height)
        
    def preprocess_data(self):
        preprocessed_window = tk.Toplevel()
        preprocessed_window.title("Preprocessed Data")
        preprocessed_window.geometry("800x600")
        
        # 给预处理窗口设置背景
        self.pre_bg_canvas = self.set_background(preprocessed_window, self.bg_image_path)
        pre_main_frame = tk.Frame(self.pre_bg_canvas, bg='white', bd=0)
        self.pre_bg_canvas.create_window((0, 0), window=pre_main_frame, anchor="nw")
        
        # 添加导出按钮示例
        export_btn = tk.Button(pre_main_frame, text="导出预处理数据", 
                              command=lambda: self.df.to_csv("preprocessed_data.csv", index=False))
        export_btn.pack(pady=20)
        
        # 绑定窗口大小变化事件
        preprocessed_window.bind("<Configure>", lambda e: self.on_pre_window_resize(e, pre_main_frame))

    def on_pre_window_resize(self, event, main_frame):
        """处理预处理窗口的大小变化"""
        image = Image.open(self.bg_image_path)
        self.bg_image = ImageTk.PhotoImage(image.resize((event.width, event.height)))
        self.pre_bg_canvas.delete("all")
        self.pre_bg_canvas.create_image(0, 0, image=self.bg_image, anchor="nw")
        self.pre_bg_canvas.config(width=event.width, height=event.height)
        self.pre_bg_canvas.create_window((0, 0), window=main_frame, anchor="nw")
        main_frame.config(width=event.width, height=event.height)
                
if __name__ == "__main__":
    root = tk.Tk()
    app = DataWizard(root)
    root.mainloop()

关键说明 #

1. 通用背景设置：set_background函数可复用给任意Tkinter窗口，通过Canvas加载并显示背景图。
2. 控件层级管理：所有控件集中在一个Frame内，再嵌入Canvas，确保控件始终在背景图上方。
3. 窗口适配：绑定<Configure>事件，窗口大小变化时自动缩放背景图并更新Frame尺寸，保证背景铺满窗口。
4. 视觉优化：设置Frame背景色与控件背景一致，避免出现遮挡；若需要半透明效果，可调整Frame的bg属性为对应透明色（部分平台支持）。

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