2011-07-12 10 views
7

Estoy trabajando en un proyecto y una de las tareas es hacer el fondo estático y cubrir toda la página. Sobre esto encontré this tutorial, usando "Awesome, Easy, Progressive CSS3 Way". Mi problema es que tengo más páginas y cada uno tiene un fondo diferente, por lo que tengo que poner la imagen de fondo <body> así:MS filtros agregados con jquery

<body style="background-image:url(images/mainBg_1.jpg);"> 

(también el estilo css se pone en <body>, no en "html", al igual que en el ejemplo)

como se puede ver en ese enlace, existen filtros para IE, así:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.**myBackground.jpg**', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='**myBackground.jpg**', sizingMethod='scale')"; 

El problema es que "myBackground.jpg" se toma de <body> etiqueta, como he escrito arriba, entonces no puedo escribir directamente en CSS (cada página tiene diferentes antecedentes).

¿Hay alguna forma de agregar estos filtros mediante jQuery? Tomé con éxito el camino de la imagen desde el cuerpo, por lo que solo tengo que pegarlo en este código y luego agregarlo con jQuery para IE < = 8.

Gracias por sus respuestas, les sigo para resolver mi problema. Por lo tanto, si alguien quiere el código:

$(function(){  
    var mu = $.browser; 
    if (mu.msie && mu.version < 9) { 

     var curBg = $('html').attr('style'); 
     curBg = curBg.split('('); 
     curBg = curBg[1].split(')'); 

     $('html').css({ 
        "filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+curBg[0]+"', sizingMethod='scale')", 
        "-ms-filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+curBg[0]+"', sizingMethod='scale')" 
      });   

    } 
}); 
+0

¿Ves algún código tuyo aquí? Usted dijo ... 'así' ... ¡nada aparece! Adjunte sus códigos en '' –

Respuesta

0

También se puede usar $ ('cuerpo') css() o $ ('cuerpo') attr() y cambie el atributo de estilo de cuerpo...

http://api.jquery.com/css/

http://api.jquery.com/attr/

+0

tanques para su respuesta. Tenía algunos conocimientos sobre estas funciones, pero no estaba seguro de cómo usar esto en ese caso. Ahora tengo éxito, así que todo se ve bien. – stefanz

1

Prueba de esta manera
podría ser algo como:

se agrega en la página de un img elemento oculto que contiene la imagen deseada

<img class="myBgImage" src="images/mainBg_1.jpg" style="display:none"/> 


Usted agarra la imagen src de ese nombre de la clase de imagen

var bgImage = $('img.myBgImage').attr('src'); 

$('body').append("<style>body{progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+bgImage+"', sizingMethod='scale'); -ms-filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' "+ bgImage +"', sizingMethod='scale')';}</style>"); 

Y anexa al cuerpo del CSS IE fijar tener BG-imagen para el VAR sosteniendo la url img src.

Solo una idea.

+0

Es mejor agregar los estilos a la cabeza, no al cuerpo. – Emil

+0

De acuerdo. Gracias Emil –

+0

Tu idea era buena pero no siguió el camino correcto. También puse la imagen en el html. – stefanz

Cuestiones relacionadas