Sencha Touch 2 background image opacity

[ultraman69]

I try to change a background image opacity, so I can display a panel over it. But no matter what I tried yet in CSS, nothing works !

Does anyone ever achieved this ? If so, could you please help me ?

Here's a sample code I'm working with for testing purpose :

{
    xtype: 'panel',
    
    style: [
              "background: url('resources/photos/girls/DT13_02b.jpg');",
              "background-color: transparent !important;",
              "background-repeat:no-repeat;background-position:center;background-size:auto 100%;",
              "opacity: 0.3"
            ].join(""),
    
    html: [
               '<h1 style="color: #FFFFFF; opacity: 1.0 !important">Welcome to Sencha Touch</h1>',
               "<p style='color: #FFFFFF;'>You're creating the Getting Started app. This demonstrates how ",
               "to use tabs, lists and forms to create a simple app</p>",
               '<h2 style="color: #FFFFFF;">Sencha Touch (2.0.0)</h2>'
         ].join("")

The problem is that the opacity of all children on the panel is affected. That's what I want to avoid. Even with the opacity back to 1.0 in child elements, it doesn't work. Any idea would be helpful.

[mitchellsimoens]

I would try to stay away from the style config but do it in CSS:

Ext.Viewport.add({
    xtype : 'panel',
    cls   : 'semi-trans',
    html  : 'Hello'
});

.semi-trans {
    opacity : 0.3;
}