Important: Please read the 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.


    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