Tkinter中Button Widget无法置于背景图片上方的问题求助

问题描述：
使用Tkinter设置背景图片后，添加的Button组件并未显示在背景图片上方，反而将背景图片挤到下方，如何调整实现按钮在背景之上？

原代码：

#!/usr/bin/python3.9

import tkinter as tk
from tkinter import ttk

class MainFrame(ttk.Frame):
    def __init__(self, container):
        super().__init__(container)

        self.columnconfigure(0, weight=1)
        self.columnconfigure(1, weight=3)
        self.columnconfigure(2, weight=3)

        self.button=tk.Button(text="test", height=1, width=2)
        self.button.grid(row=0, column=0, sticky = tk.NW)

        self.img=tk.PhotoImage(file="bg_image.png")

        self.canvas = tk.Canvas(width=1860, height=1020)
        self.canvas.create_image(0, 0, anchor=tk.NW, image=self.img)

        self.canvas.grid()

        self.img_dot = tk.PhotoImage(file="led_rd.png")
        self.canvas.create_image(200,400,image=self.img_dot)


class App(tk.Tk):
    def __init__(self):
        super().__init__() 

        # configure the root window
        self.geometry("850x500")
        self.option_add('*Font', 'Helvertica 9') 

#----------------------------------------------#


if __name__ == "__main__":
    app = App()
    
    MainFrame(app)
    app.mainloop()

核心原因 #

Tkinter的grid布局会按组件添加顺序依次分配单元格，原代码先将按钮布局在(0,0)，之后canvas默认占据下一行(row=1)，导致按钮和背景图片分属不同行。同时组件层级未调整，无法实现按钮覆盖背景的效果。

解决方法 #

提供两种实用实现方式：

方法一：同单元格布局+提升按钮层级 #

先布局背景canvas，再将按钮放在同一单元格，通过lift()提升按钮层级确保显示在背景上方：

class MainFrame(ttk.Frame):
    def __init__(self, container):
        super().__init__(container)

        self.columnconfigure(0, weight=1)
        self.columnconfigure(1, weight=3)
        self.columnconfigure(2, weight=3)

        # 先创建并布局背景canvas
        self.img=tk.PhotoImage(file="bg_image.png")
        self.canvas = tk.Canvas(width=1860, height=1020)
        self.canvas.create_image(0, 0, anchor=tk.NW, image=self.img)
        self.canvas.grid(row=0, column=0, sticky="nsew")

        # 按钮布局到同一单元格，提升层级
        self.button=tk.Button(self, text="test", height=1, width=2)
        self.button.grid(row=0, column=0, sticky=tk.NW)
        self.button.lift()

        self.img_dot = tk.PhotoImage(file="led_rd.png")
        self.canvas.create_image(200,400,image=self.img_dot)

方法二：将按钮设为Canvas的子组件 #

直接把按钮的父组件指定为canvas，用place精确定位，按钮会自然显示在背景之上：

class MainFrame(ttk.Frame):
    def __init__(self, container):
        super().__init__(container)

        self.columnconfigure(0, weight=1)
        self.columnconfigure(1, weight=3)
        self.columnconfigure(2, weight=3)

        self.img=tk.PhotoImage(file="bg_image.png")
        self.canvas = tk.Canvas(width=1860, height=1020)
        self.canvas.create_image(0, 0, anchor=tk.NW, image=self.img)
        self.canvas.grid()

        # 按钮父组件设为canvas，用place定位
        self.button=tk.Button(self.canvas, text="test", height=1, width=2)
        self.button.place(x=0, y=0)

        self.img_dot = tk.PhotoImage(file="led_rd.png")
        self.canvas.create_image(200,400,image=self.img_dot)

额外说明 #

• 方法一更适配grid布局的整体结构，保持布局一致性；
• 方法二更适合需要精准控制按钮位置的场景；
• 确保图片文件路径正确，避免因找不到图片引发异常。

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