[Solved]Make the icons background become transparent

stereomatching

@import QtQuick 2.0

Rectangle{
id : root
width : 1024
height : 768

Column{
    id: toolBarColumn
    width: 50
    height: root.height        

    Image{
        id: iconImg
        width: 50
        height: 32
        fillMode: Image.PreserveAspectFit
        source: "images/emotion_fire.png"
        smooth: true
    }

    Rectangle{
        id: background
        width: root.width; height: root.height
        gradient: Gradient {
            GradientStop { position: 0.0; color: "gray" }
            GradientStop { position: 1.0; color: "lightGray" }
        }
    }
}

}
@

I want to make the background of the icons become transparent, so it could have the same background color as
the background, how should I do?

"icon":http://www.flickr.com/photos/92283971@N04/8908280427/

The icon is come from "fatcow":http://www.fatcow.com/free-icons

rocketchicken

Look up opacity property for rectangle in the documentation. I am guessing you want the rectangle transparent ?

JapieKrekel

I downloaded the fatcow icons you refer to and had a look, both FatCow_Icons32x32 and FatCow_Icons16x16 icons already have transparent backgrounds.
The icon on flickr however appears to have a white background. Always make sure you use image formats that support the alpha-channel, e.g. 32bits png.

If I try your example without modifications I get a screen of 1024x768, with 1024x50 white bar on top and the icon in the left corner.
It looks a bit weird to have a gradient the size of root inside a column that is only 50px in with.
Why the top 50px are white is because you use a column so it will put the image in first row and the gradient below that in the second row.

Of course I do not know what you intend to build, but I would expect that the gradient will fill the complete screen, so it should be outside of the column and above it like:
@
import QtQuick 2.0

Rectangle {
id : root
width : 1024
height : 768

gradient: Gradient {
    GradientStop { position: 0.0; color: "gray" }
    GradientStop { position: 1.0; color: "lightGray" }
}

Column{
    id: toolBarColumn
    width: 50
    height: root.height

    Image{
        id: iconImg
        width: 50
        height: 32
        fillMode: Image.PreserveAspectFit
        source: "images/emotion_fire.png"
    }
}

}
@

Using the code above I get a fully gradient filled main window with the icon in the left top corner and the background of the icon is transparent, so the gradient 'shines' through it.

By the way I took away the the smooth property because that only makes sense if you scale/transform the image.

Hope this will help you in the right direction.

stereomatching

@rocketchicken, it is not my intention, but thanks for your response

@JapieKrekel, thank you, you solve my question.