PyQt5中图像的透明部分块背景颜色

Question

我正在通过翻译以前编写的 Tkinter 音乐播放器应用程序来学习 PyQt5。 其中一个配置选项允许用户设置所有按钮的背景颜色。 但是，其中三个按钮（播放、暂停和停止）是独一无二的，因为它们还显示相应的图像。 该图像由透明背景上的图标组成，其中图标为彩色（播放=绿色，暂停=黄色，停止=红色），当给定的 state 处于活动状态时，如果其他两种状态之一处于活动状态，则为白色。 下面是 Tkinter 上的（活动）播放按钮在几种不同背景设置下的样子：

和

在 Qt5 上，我通过注释掉加载图像的行来验证背景颜色设置是否正确：

但是，当加载来自 Tkinter 的相同图像文件时，背景颜色突然在图像的透明部分中被遮挡：

当我最初的尝试没有奏效时，我追踪了这篇文章并将我的代码从原始代码的执行方式修改为答案中建议的方式。 但是，就我而言，这没有任何区别。 我用来测试的代码是（图像加载注释掉了）：

import sys
from PyQt5.QtWidgets import QWidget, QPushButton, QApplication

class Example(QWidget):
    def __init__(self):
        super().__init__()
        btn = QPushButton(self)
        btn.resize(70,70)
        btn.move(115, 115)
        btn.setStyleSheet("background-color: #b5abf4")
        btn.setObjectName("widget")
        #btn.setStyleSheet("#widget{background-image: url(play_on.png)}")
        
        self.setGeometry(600, 300, 300, 300)
        self.setStyleSheet("background-color: white")
        self.show()
        
def main():
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())
    
if __name__ == '__main__':
    main()
 

我仍然是 Qt 的新手，但到目前为止我所阅读的所有内容似乎都表明这应该可行。 谁能发现我做错了什么？

Answer 1

setStyleSheet()总是覆盖先前为该小部件设置的样式表，因此您基本上忽略了先前的setStyleSheet()调用。 此外，由于您正在为父样式表设置background-color ，它会自动为其子样式表传播该背景（因为样式表确实是级联的）。

要正确设置样式表，您必须在同一调用中设置背景颜色和背景图像。

        btn.setStyleSheet('''
            #widget {
                background-color: #b5abf4;
                background-image: url(play_on.png);
            }
            ''')

由于您可能希望为所有按钮设置这些背景并避免每次单独设置样式表，您可以在父样式表中使用 object 属性和[property="value"]选择器

        btn.setObjectName("playButton")
        btn.setProperty('mediabutton', True)
        btn.setStyleSheet('''
            #playButton {
                background-image: url(play_on.png);
            }
            ''')
        
        self.setStyleSheet('''
            Example {
                /* set the background *only* for the parent widget */
                background-color: white;
            }
            QPushButton[mediabutton="true"] {
                /* set the background color for all push buttons that
                have the "mediabutton" property set to True */
                background-color: #b5abf4;
            }
        ''')