How to add a button with image and transparent background to QVideoWidget?

Question

I created a pushbutton in front of a video (use QVideoWidget and QMediaPlayer). I am using an image with a transparent background to set image button.

How can I set a QPushbutton to be transparent, but the image inside to be visible? I have tried setting it transparent, but the image's background turns black.

I have tried this C++ over Qt : Controlling transparency of Labels and Buttons but it doesn't work. And I tried this :

ui->btn_Touchme->setAttribute(Qt::WA_TranslucentBackground);

ui->btn_Touchme->setStyleSheet("QPushButton{background: transparent;}");

ui->btn_Touchme->setAttribute(Qt::WA_NoSystemBackground, true);

ui->btn_Touchme->setAttribute(Qt::WA_TranslucentBackground, true);

and it is still black

I tried using QLabel, but I got same result. Any suggestions for me?

I am using qt 5.3.2 and ubuntu 14.04LTS

Solution 1

If it is ok to show the button margin on mouse hover over the button, you can use a QToolButton with autoRaise set to true.

Also, you can set following stylesheet too to make button transparent even when mouse hovers over it.

ui->btn_Touchme->setStyleSheet("background-color: rgba(255, 255, 255, 0);");

Solution 2

I am using Ubuntu 16.04 LTS Qt 5.7.0, and this works for me:

Change the stylesheet of the button in the .ui file:

border: 0px;

background: transparent; is not needed.

Solution 3

In order to make a QPushButton transparent, you also need to set the button to be "flat":

button->setFlat(true);
button->setStyleSheet("QPushButton { background-color: transparent }");

Or in other words, set the border in the Stylesheet on 0px:

button->setStyleSheet("QPushButton { background-color: transparent; border: 0px }");

I hope this works for you and others that might have the same problem.

Comments

[vee sivee]

thanks for reply.. i tries this ui->btn_Touchme->setStyleSheet("QToolTip {font-size:12pt; color:white; padding:2px; border-width:2px; border-style:solid; border-radius:4px }"); but doesn't work. any suggestions for me?

[vee sivee]

i tried -- ui->btn_Touchme->setStyleSheet("background-color: rgba(255, 255, 255, 0);"); -- but still doesn't work.. image on the button doesn't show..

[Lahiru Chandima]

I created a simple demo app. Check. s000.tinyupload.com/index.php?file_id=98983241524208376612

[vee sivee]

i tried like your demo, set image as icon of the button, and then change setStyleSheet in .ui : background-color: rgba(255, 255, 255, 0); . And i try use your image icon. But the button still have black rectangle (the background of icon still black). By the way, i created the button in front of a video (i used QVideoWIdget and QMediaPlayer for play video).

[alteredinstance]

Please create a complete and thorough explanation in your answer.

[Troyseph]

If the button is toggleable, when pushed in there is still a background painted