Kann ich die Deckkraft eines CSS-Hintergrundbildes animieren?

Question

CSS/Javascript ist nicht meine Stärke, also würde ich gerne fragen, ob es möglich ist, die Hintergrundbild-Opazität auf, sagen wir, 0,5 zu ändern.

Ich habe ein div mit

background-image: url(images/nacho312.png); 
background-position: -50px 0px; 
background-repeat: no-repeat no-repeat; 

aber wenn ich eine bestimmte Ansicht zu laden es sieht nicht sehr gut, so dass ich möchte ein „Halb aufloesen“ Effekt haben, wenn diese Ansicht gezeigt. Ist es möglich?

Dank

Answer 1

Hier ist ein Anfang.

var element = document.getElementById('hello'), 
    targetOpacity = 0.5, 
    currentOpacity, 
    interval = false, 


interval = setInterval(function() { 

    currentOpacity = element.getComputedStyle('opacity'); 

    if (currentOpacity > targetOpacity) { 
     currentOpacity -= 0.1; 
     element.style.opacity = currentOpacity; 

    } else { 
     clearInterval(interval); 
    } 


}, 100); 

See it on jsFiddle.

Führen Sie diese auf window.onload = function() { } oder recherchieren Sie über Browser auf DOM bereit Ereignisse.

Natürlich ist es viel einfacher mit einer Bibliothek wie jQuery.

$(function() { 
    $('hello').fadeTo('slow', 0.5); 
}); 

Dies hängt davon ab, dass die Kinder Ihres Containers die Deckkraft erben. Dies zu tun, ohne sie zu beeinflussen, ist ein wenig schmerzhaft, da Sie die Deckkraft von Kindern nicht über opacity: 1 zurücksetzen können.

Answer 2

background-image: url(images/nacho312.png); 
background-position: -50px 0px; 
background-repeat: no-repeat no-repeat; 

opacity:0.5; //for firefox and chrome 
filter:alpha(opacity=50); //for IE 

Answer 3

Wenn Sie glatt und ohne zu viel zusätzliche Arbeit zu tun animieren wollen - das ist eine gute Aufgabe für jQuery (oder eine andere, ähnliche Bibliothek).

Mit jQuery you could do:

$('#id_of_div').fadeTo('fast', 0.5); 

Um einen schnellen animierte Fade-Effekt auf der entsprechenden DIV zu erhalten.

Update: Wenn Sie eigentlich das Hintergrundbild verblassen wollen, aber keine Vordergrundinhalte des DIV, ist dies viel schwieriger. Ich würde empfehlen, einen Container DIV mit Position: relative und zwei innere DIVs mit Position: absolute; . Der erste der inneren DIVs kann das Hintergrundbild und einen niedrigeren Z-Index als der zweite der DIVs haben, und der zweite DIV würde irgendeinen Text usw. enthalten, um im Vordergrund zu zeigen. Bei Bedarf können Sie $('#id_of_first_div').fadeTo('fast', 0.5); aufrufen, um nur das DIV zu verblassen, das das Hintergrundbild enthält.

Übrigens, die wörtliche Antwort auf Ihre Frage ist "Nein, Sie können nicht die Opazität eines CSS-Hintergrundbilds animieren" - Sie können nur die Deckkraft eines DOM-Elements, nicht seine Attribute, also die Notwendigkeit für den obigen Hack.

Andere Aktualisierung: Wenn Sie die Verwendung von Drittanbieterbibliotheken vermeiden möchten, können Sie die Fade des Hintergrund-DIV unter Verwendung von Ansatz in Alex's answer behandeln.