Opacity and inheritance

GrahamLa

Hi
I have a container element that I want to set an opacity value for, but I don't want the 'contained' elements to get this opacity.
Is there a way of achieving this?
Container code

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import Qt.labs.location 1.0
import "../../Customisation"

Rectangle {
    id: frame
    property string title: ""
    property string contentSource: ""
    property string regionColor: ""
    height: label.height + loader.height + base.height

    color: "black"

    opacity: 0.5

    Label {
        id: label
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
        font.pointSize: Style.appSection.fontSize
        color: Style.appSection.titleLabelColor
        text: title.toUpperCase()
        background: Rectangle {
            color: Style.appSection.titleLabelBackgroundColor
            height: 20
        }
    }

    Loader {
        id: loader
        anchors.top: label.bottom
        anchors.topMargin: 50
        width: childrenRect.width
        height : childrenRect.height

        source: contentSource


    }

    Rectangle {
        id: base
        height: 5
        color: regionColor
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0
    }
}

Yashpal

Hi! do not set opacity, instead set container rectangle color with alpha value
color: "#80000000" should give you the desired outcome.

Cheers!!

GrahamLa

@Yashpal
Thanks - it worked