1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    28
    Answers
    1
    Vote Rating
    0
    ultraman69 is on a distinguished road

      0  

    Default Answered: Sencha Touch 2 background image opacity

    Answered: Sencha Touch 2 background image opacity


    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 :

    Code:
    {
        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.

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

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    750
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

    Code:
    Ext.Viewport.add({
        xtype : 'panel',
        cls   : 'semi-trans',
        html  : 'Hello'
    });
    Code:
    .semi-trans {
        opacity : 0.3;
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar