Transparent Background for Stacked Widgets in PyQt5

Question

I've been trying to create a basic clock using PyQt5. The clock part works and the background image behind the clock loads but I am unable to get the background of the text to be transparent.

I have tried both the way listed below and also with self.lbl1.setStyleSheet("background-color: rgba(255, 255, 255, 10);") but I get the same result in both cases.

If I set the layout.setCurrentIndex(0) I see that the background jpeg is there so that is loading just fine.

Any thoughts on what I would need to do to have layered widgets with transparency?

To try to clear it up a bit

Here is what I get

here is what I want

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *

class Example(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        layout = QStackedLayout()


        #Background area test
        self.background = QLabel(self)
        self.background.setPixmap(QPixmap("image.jpeg"))
        self.background.show()
        #self.background.setAutoFillBackground(True)

        #Setup text area for clock
        newfont = QFont("Consolas",120, QFont.Bold)
        self.lbl1 = QLabel()
        self.lbl1.setAlignment(Qt.AlignCenter)
        self.lbl1.setFont(newfont)
        self.lbl1.setWindowFlags(Qt.FramelessWindowHint)
        self.lbl1.setAttribute(Qt.WA_TranslucentBackground)

        #Timer to refresh clock
        timer = QTimer(self)
        timer.timeout.connect(self.showTime)
        timer.start(1000)
        self.showTime()



        #layout area for widgets

        layout.addWidget(self.background)
        layout.addWidget(self.lbl1)
        layout.setCurrentIndex(1)
        self.setLayout(layout)
        self.setGeometry(300,300,250,150)
        self.show()

    def showTime(self):
        time = QTime.currentTime()
        text = time.toString('hh:mm')
        if (time.second() % 2) == 0:
            text = text[:2] + ' ' + text[3:]
        self.lbl1.setText(text)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())

You could show an image of what you get and what you want to get, this would clarify your question a lot. — eyllanesc, Jun 29 '17 at 20:37
@eyllanesc Yep, can do. Added some pictures to my question of what it is doing now and what I would like it to do. — Klankins, Jun 30 '17 at 12:25

score 5 · Accepted Answer · answered Jun 30 '17 at 16:34

The problem is using QStackedWidget, according to the documentation:

The QStackedLayout class provides a stack of widgets where only one widget is visible at a time.

In it tells us that only a widget is visible. That is why the image is not shown, to force make them visible we use:

layout.setStackingMode(QStackedLayout.StackAll)

Obtaining the following:

As mentioned in the documentation QStackedlayout is used to display one widget at a time. In your case I think it is unnecessary, you could only use a label and any layout, you can use styleSheet to place the background image, the following code shows what I say.

class Example(QWidget):
    def __init__(self, parent=None):
        QWidget.__init__(self, parent=parent)
        self.initUI()

    def initUI(self):
        self.setGeometry(300,300,250,150)
        layout = QVBoxLayout(self)
        layout.setContentsMargins(0, 0, 0, 0)
        newfont = QFont("Consolas",120, QFont.Bold)
        self.lbl1 = QLabel(self)
        self.lbl1.setStyleSheet("border-image:url(image.jpeg);")
        self.lbl1.setAlignment(Qt.AlignCenter)
        self.lbl1.setFont(newfont)
        layout.addWidget(self.lbl1)

        #Timer to refresh clock
        timer = QTimer(self)
        timer.timeout.connect(self.showTime)
        timer.start(1000)
        self.showTime()
        self.show()

    def showTime(self):
        time = QTime.currentTime()
        text = time.toString('hh:mm')
        if (time.second() % 2) == 0:
            text = text[:2] + ' ' + text[3:]
        self.lbl1.setText(text)

The following image shows the new output:

Transparent Background for Stacked Widgets in PyQt5

1 Answers1