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

Multiple layers and opacity



  • Hi Guys,

    Lets' say I have three rectangles on top of each other. I want the middle want to be half transparent (so opacity: 0.5). But the rectangle on top should not be transparent (so opacity: 1). This doesn't work, all layers on top of the half transparent layer are also half transparent.

    Example:

    @
    Item {
    Rectangle {
    id: bigRect
    z: 0
    width: 100
    height: 100
    color: "black"
    }

    Rectangle {
    id: smallerRect
    z: 1
    anchors.centerIn: bigRect
    width: 50
    height: 50
    color : "white"
    opacity: 0.5
    }

    Rectangle {
    id: smallestRect
    z: 2
    width: 25
    height: 25
    color: "red"
    opacity : 1
    anchors.centerIn: smallRect
    }
    }
    @



  • It works fine here but you have a typo in the last item's anchors line. It should be:

    @
    anchors.centerIn: smallerRect
    @

    Can you post a screenshot of what you see please? All I did was ot fix the above typo and run that file in qmlviewer and then adjust the opacity of smallestRect to see the differences.


Log in to reply