2011-12-01 12 views
7

Estoy tratando de establecer el fondo de un elemento en no-repeat - He intentado de la siguiente manera, pero parece que no hace nada, ¿me estoy equivocando? Saca la imagen en el enlace a que está bien. Estoy ocultando los enlaces de texto usando text-indent para sacarlo de la página (ocultándolo) pero ocultar esto también oculta la imagen de fondo. ¿Hay alguna manera de tratar de ocultar el enlace y simplemente mostrar la imagen bg? A continuación se muestra lo que he hecho hasta ahora, solo necesito una guía para superar este problema, relativamente nuevo para jQuery.jQuery .css Fondo no-repeat

<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'); 
}); 

cuando veo que en el elemento incendiario td a esto es lo que viene de la CSS jQuery. Incluso establecer el fondo en no-repeat desde aquí no funciona y en el archivo css principal he intentado agregar un alto y ancho, parece que no funciona. Confundido ahora

<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; 
} 

Respuesta

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

Houdmont que funcionó a la perfección: ¿hay documentación sobre las diferentes propiedades que puedo agregar para el fondo como altura, ancho, niveles de opacidad? - '.css ({' background-image ':' url (/ assets/img/radarstep '+ (index + 1) +' dark.png) ', ' background-repeat ':' no-repeat ', 'altura': '25px', 'ancho': '25px' }); ' – MJCoder

+0

que funcionó perfectamente – MJCoder

0

Prueba esto:

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

para añadir la línea se vuelve con ** esperado: ':' ** – MJCoder

+0

mí oh tonto, en lugar de añadir el, que debería ser la adición : (a veces tengo ganas de quitarme los ojos de la cabeza) – MJCoder

+0

Donde has escrito 'background-repeat:', debería ser 'background-repeat', sin: al final del nombre de la propiedad. – Houdmont

2

¿Por qué usted comentar el css display: block;? Lo necesita para decirle al navegador que su enlace debe mostrarse como un bloque. Además, no estoy seguro de que pueda utilizar las propiedades de jQuery css como lo hace; ¿Intentó la sintaxis div.css({ propertie: value, propertie: value });?

+0

Inicialmente puse un bloque para ocultar el texto de la página para fines de prueba. Voy a intentar tu solución, Jeremy. Gracias por tomarse el tiempo para ayudarme. – MJCoder

+0

sin comentar la 'pantalla: bloque' funciona ahora, ya que muestra la altura correcta + ancho =) – MJCoder

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

Prueba esto funciona para mí