transparent layers one on top of another

[gzhong]

Hello,

I thought this would be easy to find answers to, but days of googling with different words and also tweaking using Sencha Architect, I can't find the solution.

Goal should be simple. I have an image and I want to overlay it with another panel that contains text that I can freely manipulate. The user should be able to see the image with the text over it (so its opacity is less than zero and the rest of the panel is transparent where there is no text).

I was able to do this using absolute layout for the parent container that contains these two panels. But the problem with that is I need to tell beforehand how big the image is, and also, when i resize, the image doesn't resize.

On the other hand, what seemed logical to me and simpler, is to use card layout. Put the text panel above the image container. Card layout will readjust the image as I resize the browser and does not require me to tell it how big the image container needs to be. But card layout does not work. It will show just the text panel. I change the opacity, and it simply shows the text dimmer, but the white background is still there. I tweaked the opacity at every level of the div layer in Chrome, and still, the image won't show. I am not even sure if the image is behind or below! Furthermore, Chrome shows "display: none" for the image panel! I removed that attribute and still, nothing.

So does anyone know how to make it work in Card Layout? Or some other solution besides using absolute layout?

Thanks!

[scottmartin]

This may help with the image part of your question:

.semi-trans {
    opacity : 0.5;
}

.red-back {
    font-size: 16px;
    font-weight : bold;
    background-color : #FF0000;

}

.red tspan { 
    fill: #ff0000;
    font-size   : 16px;
    font-weight : bold;
}

Ext.define('MyImage', {
    extend: 'Ext.container.Container',

    height: 500,
    width: 500,

    layout: {
        type: 'absolute'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
            {
                xtype: 'image',
                height: 200,
                width: 200,
                src: 'html5-buildings.png',
                cls: 'semi-trans',
                x: 150,
                y: 75                
            },
            {
                xtype: 'text',
                text: 'Sample Vertical Text Item',
                x: 240,
                y: 180,   
                cls: 'red',
                degrees: 90
            }
            ]
        });
        me.callParent(arguments);
    }

});

Ext.onReady(function () {
    Ext.create('MyImage', {
        renderTo: Ext.getBody()
    });
});

Resulting image:
f287324-ss.png

[gzhong]

Right, that's what I did. And it's fine as long as these conditions are acceptable:

1. You specify the height and width of each layer
2. The layers do not resize when you resize the browser

I was looking for a solution where I don't have to specify the height and width (which is the case if I were to use card layout), and the things will resize when I resize the browser (again, true if with card layout).

Thanks!

[scottmartin]

Using the card layout, the panels default to 'fit', so by default they will resize.

[gzhong]

Right, that was what I also tried, but card layout will NOT show you more than one. Even if you set the opacity of the top one to 0, you still don't see the panel beneath it.