[Solved]Make the icons background become transparent



  • @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



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



  • 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.



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

    @JapieKrekel, thank you, you solve my question.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.