Can someone tell me why my background image in Sencha Touch 2 isn't showing?

问题

Here is my MainView:

Ext.define("Test.view.Main", {
extend: 'Ext.Panel',
config: {
cls: 'transp'
}
});

Here is (the relevant part of) my app.css:

/* line 3, ../themes/stylesheets/sencha-touch/default/core/_reset.scss */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
h4, h5, h6, pre, code, form, fieldset, legend,
input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
.transp
{
   background-image: url(http://support.sencha.com/assets/images/logo-sencha.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

I know it recognizes the class because when I set the opacity to 0, the gray background of the mainview isnt displayed. Can someone please help me? I am at a total loss.

回答1:

Try using !important in your CSS property.

回答2:

FWIW, this didn't work for me.

I have a form panel w/ Sencha Touch and had to do this: .TxPanel .x-scroll-container { background: url('img/txbackground.png') repeat center; }

after adding TxPanel to the cls setting for the form.

回答3:

Once thing in dealing with CSS that most people don't realize is specificity! http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

So if you have your background class .myBackground{ background-image:.. } vs sencha's .x-container .x-component .x-background{ background-image:..} sencha's class has more selectors, and a higher specificity, and will override your .myBackground class! Even if it is declared after sencha's css!

Anyway learning about specificity in depth helped me a lot with styling in sencha.

来源：https://stackoverflow.com/questions/11075986/can-someone-tell-me-why-my-background-image-in-sencha-touch-2-isnt-showing

标签

extjs

sencha-touch-2