Important: Please read the Qt Code of Conduct -

Use of transparent .png and .gif

  • Seems to me the goal of Qt Quick is to help make a UI as easy to program as a webpage. However, the failure to handle transparent images in QML as easily as in HTML is disappointing. (Always get opaque white replacing the transparency.)

    I have seen several "solutions" on the web, but none seem to cause the view window to behave as expected. Just a suggestion, but it seems like there should be one simple attribute to set in the QDeclarativeView object for this expected behavior...


  • I got this to work - thankfully, changing only my qml. For the benefit of others, here is what was needed:

    Rectangle {
    id: btn1
    color:"transparent" <<<<<<<<<<<< add this or the "transparent" area is the color of the 'Rectangle' (defaults to white)
    width: 154; height: 101
    x: 107; y: 218
    Image { id:btn1up; source: "images/all_transparent.png" }
    MouseArea { id: mouseArea1; anchors.fill: parent; onPressed: { someData.btnMode() } }
    states: State {
    when: mouseArea1.pressed
    PropertyChanges { target: btn1up; source: "images/some_transparent.png" }

    [EDIT: code formatting, please wrap in @-tags, Volker]

Log in to reply