Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QT opacity on background



  • Hey,

    I'm new to QT and I have been struggling to put a QPixmap transparent, I currently have this code:

    void MainWindow::resizeEvent(QResizeEvent *event){
        //Gets background images and resizes it on window resize
        QPixmap backgroundImage(":/Images/Background/img.jpg");
        backgroundImage = backgroundImage.scaled(this->size(), Qt::IgnoreAspectRatio);
    
        QPalette p = palette();
        p.setBrush(QPalette::Background,backgroundImage);
        this->setPalette(p);
    
        //Calls base implementation
        QMainWindow::resizeEvent(event);
    }
    

    That resizes the image when moving the window around, but I have been unable to set that background image to have some kind of opacity. What is the best way to go about this, I am aware that Im not the only one that has had this problem before since I have searched around but their implementations didn't seem to work for me.

    Also if someone could explain the difference in using QPalette to paint versus QImage and the few others I have seen around that would be great as well, Im confused as why there are so many.


  • Lifetime Qt Champion

    Hi
    Do you mean opacity so that Desktop can be seen through the mainwindow?

    On windows 10 , i could only do that with

    setAttribute(Qt::WA_TranslucentBackground);
    setWindowFlags(Qt::FramelessWindowHint); // with borders, its always just black.
    

    void MainWindow::paintEvent(QPaintEvent *event)
    {
    QPainter p(this);
    p.setOpacity(0.3);
    p.drawPixmap(0, 0, QPixmap(":/bg.jpg"));
    }

    alt text



  • @mrjj

    I mean the image itself being transparent, I want to have this effect ( the image in the back )

    Screenshot_1.png image url)


  • Lifetime Qt Champion

    Hi
    Ah, im not tried with QPalette::Background and transparent but if
    you combine the shown paintEvent and your resizeEvent, it should look
    just like that.

    backgroundImage should be a member so you scale it in resizeEvent and paintEvent paints it with
    p.setOpacity(0.3);



  • @mrjj

    Currently have it like this then

    void MainWindow::resizeEvent(QResizeEvent *event){
        //Gets background images and resizes it on window resize
        backgroundImage = backgroundImage.scaled(this->size(), Qt::IgnoreAspectRatio);
    
        /*QPalette p = palette();
        p.setBrush(QPalette::Background,backgroundImage);
        this->setPalette(p);*/
    
        //Calls base implementation
        QMainWindow::resizeEvent(event);
    }
    
    void MainWindow::paintEvent(QPaintEvent *event){
        QPainter p(this);
        p.setOpacity(0.5);
        p.drawPixmap(0,0,QPixmap(backgroundImage));
    }
    

    for some reason though the image on resize now acts weird

    Okay:
    Screenshot_2.png

    Not okay(after resizing):
    Screenshot_4.png


  • Lifetime Qt Champion

    Hi
    I think it comes from scaling the scaled image. ( Scale the scaled so to speak)
    Else i don't know why it would look that odd suddenly.

    So try with keeping the original image in new variable org_backgroundImage
    and do

    backgroundImage = org_backgroundImage.scaled(this->size(), Qt::IgnoreAspectRatio);

    so each time we scale from org image and not the last scaled version.



  • @mrjj

    Yep that makes sense that it was what was happening, thank you very much for the help!


Log in to reply