2011-12-01 14 views
7

Sto provando a impostare lo sfondo di un elemento su no-repeat - Ho provato il seguente modo ma sembra non fare nulla, sto sbagliando da qualche parte? Mostra l'immagine sul collegamento a che va bene. Nascondo i link di testo usando text-indent per rimuoverlo dalla pagina (nascondendolo) ma nascondendo questo nasconde anche l'immagine di sfondo. C'è un modo per cercare di nascondere il collegamento e solo visualizzare l'immagine di bg? Di seguito è quello che ho fatto finora - ho solo bisogno di una guida per superare questo problema - relativamente nuovo per jQuery.jQuery .css Sfondo non ripetibile

<script type="text/javascript"> //Looking for every td a element and alerting it out on page (popup) 

$('.AspNet-DataList td a').each(function (index) { 
    //alert(index + ': ' + $(this).text()); 
    var submitEl = $(".AspNet-DataList td a") 
    //.parent('.AspNet-DataList td a') 
    .css('background', 'url(/assets/img/radarstep' + (index + 1) + 'dark.png)', 'backgroundRepeat:', 'no-repeat'); 
}); 

Quando vista in firebug l'elemento td a questo è ciò che viene dalla css jQuery. Anche impostare lo sfondo su no-repeat da qui non funziona e nel file css principale ho provato ad aggiungere altezza e larghezza - non sembra funzionare. Confuso ora.

<a id="ctl07_HealthAndSafetyRadarForm_Wizard_SideBarContainer_SideBarList_SideBarButton_5" href="javascript:__doPostBack('ctl00$ctl07$HealthAndSafetyRadarForm_Wizard$SideBarContainer$SideBarList$ctl05$SideBarButton','')" style="background: url("/assets/img/radarstep6dark.png") no-repeat scroll 0 0 transparent;">Review</a> 


//main.css 
.AspNet-DataList td a { 
    /*text-indent: -9999em;*/ 
    /*display:block; */ 
    background-repeat: no-repeat; 
    height: 25px; 
    width: 25px; 
} 

risposta

19
.css({'background-image' : 'url(/assets/img/radarstep' + (index + 1) + 'dark.png)', 
     'background-repeat': 'no-repeat'}); 
+0

Houdmont che ha funzionato perfettamente - c'è documentazione sulle diverse proprietà che posso aggiungere per lo sfondo come altezza, larghezza, livelli di opacità? - '.css ({' background-image ':' url (/ assets/img/radarstep '+ (indice + 1) +' dark.png) ', ' background-repeat ':' no-repeat ', 'height': '25px', 'width': '25px' }); ' – MJCoder

+0

che ha funzionato perfettamente – MJCoder

0

Prova questo:

.css({ 
    'background-image': 'url(/assets/img/radarstep' + (index + 1) + 'dark.png)', 
    'background-repeat' : 'no-repeat' 
}); 
+0

quando si aggiunge la linea ritorna con ** prevista: ':' ** – MJCoder

+0

oh sciocco me, invece di aggiungere il, dovrei aggiungerò : (a volte ho voglia di sbattere gli occhi fuori dalla mia testa) – MJCoder

+0

Dove hai scritto 'background-repeat:', dovrebbe essere 'background-repeat', senza il: alla fine del nome della proprietà. – Houdmont

2

Perché hai commento delle display: block; css? È necessario che comunichi al browser che il tuo link deve essere visualizzato come un blocco. Inoltre non sono sicuro che tu possa usare le proprietà jQuery css come fai tu; hai provato la sintassi div.css({ propertie: value, propertie: value });?

+0

Inizialmente ho messo un blocco per nascondere il testo fuori dalla pagina a scopo di test. Proverò la tua soluzione Jeremy. Grazie per aver dedicato del tempo ad aiutarmi. – MJCoder

+0

non commentante il 'display: block' ha funzionato ora come mostra l'altezza corretta + width =) – MJCoder

0
input[type="submit"] {background:url(mybutton.png);background-repeat:no-repeat;height: 29px;width: 44px; } 

Prova questo funziona per me