CustomTkinter背景图片上添加按钮显示异常的解决办法咨询

问题原因分析 #

• systemTransparent外观模式下，CustomTkinter组件的透明度渲染存在兼容性问题，导致按钮在背景图上显示异常。
• 用于承载背景图的CTkLabel设置了过小的width和height，会截断背景图，干扰后续组件的定位布局。
• 原代码未实现按钮的计数逻辑，且按钮默认样式在透明窗口中视觉效果不协调。

解决步骤与修改后代码 #

关键修改点 #

1. 替换窗口透明实现方式：放弃systemTransparent，改用窗口attributes设置整体透明度，避免组件渲染冲突。
2. 修正背景图标签尺寸：移除CTkLabel的固定宽高，让标签自动适配图片大小。
3. 优化按钮样式：设置带透明度的按钮背景色，使其在背景图上自然显示。
4. 添加计数功能：实现按钮点击时数字递增并显示的逻辑。

完整代码 #

from PIL import Image
import customtkinter

# 基础配置：先设置外观模式，再单独控制窗口透明度
customtkinter.set_appearance_mode("light")
customtkinter.set_default_color_theme("blue")

root = customtkinter.CTk()
root.geometry("400x550")
# 设置窗口整体透明度（0=完全透明，1=不透明）
root.attributes("-alpha", 0.95)

# 加载背景图片
my_image = customtkinter.CTkImage(
    dark_image=Image.open("zikirmat\\image2.png"),
    light_image=Image.open("zikirmat\\image.png"),
    size=(300, 300)
)

# 背景图标签：移除固定宽高，让标签适配图片尺寸
my_label = customtkinter.CTkLabel(root, image=my_image, text="")
my_label.place(x=50, y=5)

# 计数变量与更新函数
count = 0
def update_count():
    global count
    count += 1
    count_label.configure(text=str(count))

# 计数显示标签
count_label = customtkinter.CTkLabel(
    root,
    text="0",
    font=("Arial", 30, "bold"),
    text_color="#ffffff"  # 根据背景图颜色调整文字对比度
)
count_label.place(x=170, y=100)

# 优化后的透明按钮
button = customtkinter.CTkButton(
    root,
    text="",
    width=110,
    height=110,
    corner_radius=100,
    fg_color=(0, 0, 0, 0.2),  # 带透明度的按钮背景
    hover_color=(0, 0, 0, 0.4),  # 鼠标悬停时的透明度
    command=update_count
)
button.place(y=180, x=100)

root.mainloop()

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