如何实现Tkinter中Button组件的bg_color透明效果？

问题描述 #

想要实现CustomTkinter中CTkButton组件的背景透明效果，查阅官方文档未找到具体说明，现有代码如下：

import customtkinter as ctk
from tkinter import *
from PIL import Image, ImageTk


def resize_image(event=None):
    width, height = window.winfo_width(), window.winfo_height()
    resized_image = image.resize((width, height))
    photo = ImageTk.PhotoImage(resized_image)
    background.configure(image=photo)
    background.image = photo
window = ctk.CTk()
width = 1280
height = 720
window.geometry(f"{width}x{height}")
window.resizable(False, False)
window.wm_attributes('-transparentcolor', '#ab23ff')
image = Image.open("testImages/istockphoto-1185382671-612x612.jpg")
photo = ImageTk.PhotoImage(image)

background = ctk.CTkLabel(window, image=photo, text="")

background.configure(image=photo)

background.bind("<Configure>", resize_image)
background.place(x=0, y=0)

#frame = ctk.CTkFrame(window, width=1250, height=690, bg_color="gray")
#frame.place(x=15, y=15)


btn = ctk.CTkButton(window, text="Start", width=150, corner_radius=10, border_width=0, bg_color="#000000")
btn.place(x=460, y=360)

可行解决方案 #

方案1：利用窗口全局透明色

你已经通过window.wm_attributes('-transparentcolor', '#ab23ff')设置了窗口的全局透明色，只需将按钮的bg_color设为该颜色，就能让按钮背景完全透明，透出背后的背景图：

btn = ctk.CTkButton(window, text="Start", width=150, corner_radius=10, border_width=0, bg_color="#ab23ff")

方案2：使用RGBA颜色实现半透明效果

CustomTkinter支持RGBA格式的颜色值，可以直接给按钮设置带透明度的前景色，并将bg_color设为transparent，实现灵活的半透明效果：

btn = ctk.CTkButton(window, text="Start", width=150, corner_radius=10, border_width=0, 
                    fg_color=(0, 0, 0, 0.3),  # 黑色带30%透明度
                    hover_color=(0, 0, 0, 0.5),  # 鼠标悬停时透明度提升至50%
                    bg_color="transparent")

注意：此方案需要使用较新版本的CustomTkinter，旧版本可能不支持bg_color="transparent"参数。

修改后的完整代码示例 #

import customtkinter as ctk
from tkinter import *
from PIL import Image, ImageTk


def resize_image(event=None):
    width, height = window.winfo_width(), window.winfo_height()
    resized_image = image.resize((width, height))
    photo = ImageTk.PhotoImage(resized_image)
    background.configure(image=photo)
    background.image = photo

window = ctk.CTk()
width = 1280
height = 720
window.geometry(f"{width}x{height}")
window.resizable(False, False)
window.wm_attributes('-transparentcolor', '#ab23ff')

image = Image.open("testImages/istockphoto-1185382671-612x612.jpg")
photo = ImageTk.PhotoImage(image)

background = ctk.CTkLabel(window, image=photo, text="")
background.bind("<Configure>", resize_image)
background.place(x=0, y=0)

# 方案1：完全透明背景按钮
btn = ctk.CTkButton(window, text="Start", width=150, corner_radius=10, border_width=0, bg_color="#ab23ff")
btn.place(x=460, y=360)

# 方案2：半透明按钮（可取消注释测试）
# btn2 = ctk.CTkButton(window, text="Start (Semi-transparent)", width=200, corner_radius=10, border_width=0,
#                      fg_color=(0,0,0, 0.3),
#                      hover_color=(0,0,0, 0.5),
#                      bg_color="transparent")
# btn2.place(x=620, y=360)

window.mainloop()

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