QML Opacity Inheritance

Question

In QML, how can I prevent a child element from inheriting the opacity from its parent? I want to set different opacity values for the parent and it\'s child element.

Answer 1

I also ran into this problem with Qt 4.8.6.

In my particular case, I wanted the top level item to be 20% transparent with black color, but have its child elements be unaffected by any opacity/transparency setting from the parent.

Opacity did not work, due to the inheritance mechanism of QML.

But I was able to use the rgba function from the Qml Qt object. This allowed me to get exactly what I wanted, the parent is now 20% transparent, but the child elements are unaffected.

Rectangle {
    width: 400
    height: 400
    color: Qt.rgba(0, 0, 0, 0.2) // Works perfectly, pure black with 20% transparency, equal to 0.2 opacity

    // Unaffacted child elements here...
}

Note: I also tried to use the RGBA color codes directly, as mentioned by a previous poster, but it did not work.

Example:

color: "#000000FA" // Supposed to be semi transparent, but always transparent, regardless of the alpha value

Setting the alpha value for any other RGBA values worked, just not with pure black.