How to make background rectangle transparent containing many elements?

[kunal269]

The code is as below.
What i want to do is to make the outer rectangle transparent containing the image. If I put the opacity of the outer rectangle to 0.0 then image being the child also becomes transparent. Is there a way to make outer rectangle transparent irrespective of inner image.

Rectangle
{
    id:outerRect
    width: 308
    height: 271
    color:"transparent"
    property variant deleteTipData:deletePopUpData
 
         Image {
        id: backImage
        source: "ui_images/background.png"
        width:208
        height: 171
 
    }
 
}

Rectangle
{
    id:outerRect
    width: 308
    height: 271
    color:"transparent"
    property variant deleteTipData:deletePopUpData
   
         Image {
        id: backImage
        source: "ui_images/background.png"
        width:208
        height: 171
        
    }

}

To copy to clipboard, switch view to plain text mode 

[technoViking]

You can simply create a rectangle that isn't a parent/child of anything. Just make a rectangle and set its position behind the image.


example:

import Qt 4.7
 
Rectangle {
    id: rectangle2
    width: 200
    height: 200
 
    Rectangle {
        id: rectangle1
        x: 35
        y: 58
        width: 131
        height: 84
        color: "#f92626"
        opacity: 0.49
        anchors.verticalCenterOffset: 0
        anchors.verticalCenter: parent.verticalCenter
    }
 
    Image {
        id: image1
        x: 74
        y: 76
        width: 54
        height: 49
        source: "qrc:/qtquickplugin/images/template_image.png"
    }
}

import Qt 4.7

Rectangle {
    id: rectangle2
    width: 200
    height: 200

    Rectangle {
        id: rectangle1
        x: 35
        y: 58
        width: 131
        height: 84
        color: "#f92626"
        opacity: 0.49
        anchors.verticalCenterOffset: 0
        anchors.verticalCenter: parent.verticalCenter
    }

    Image {
        id: image1
        x: 74
        y: 76
        width: 54
        height: 49
        source: "qrc:/qtquickplugin/images/template_image.png"
    }
}

To copy to clipboard, switch view to plain text mode 

[antialias_forum]

Had the same problem. There's a couple of ways to do this:

1) Use the method technoViking uses
2) Make the Image the parent and the Rectangle the child and just make the child bigger than the parent. Problem with this is that you need to take care when positioning your object. Just plain adding such obejcts into (e.g.) a column without appropriate spacing will lead to overlapping areas.

In my case I wanted to have an invisible border that would already react to a mouseHover before the user reaches the icon. So I made an Item as parent with a smaller scaled image and a full scaled mouseArea as children