Glatte Hintergrundfarbe Opazität nach zugrunde liegenden Bild lädt

Question

Ich habe ein div mit einem schwarzen Hintergrund. Wenn meine Seite geladen wird, rufe ich eine image an und lade dann image in eine div hinter der Hauptleitung div. Dann möchte ich die überlagernden div sanft verblassen, um eine Opazität zu haben, so dass das Bild darunter angezeigt wird, aber ohne die Opazität des Inhalts in der überlagernden div.

Was ich habe, ist eigentlich gar nicht arbeiten: https://jsfiddle.net/n7t2xmha/3/

• Die Animation ist nicht glatt
• Die Opazität ist nicht korrekt
• Der Text bleibt nicht solide

Code:

<div class="outerdiv"> 
    <div class="innerdiv"> 
    </div> 
    <p> 
     content - should remain solid white 
    </p> 
</div> 

.outerdiv { 
    background-color: black; 
    position: relative; 
    display: block; 
    height: 500px; 
    width: 500px; 
    color: white; 
    -moz-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    -webkit-transition: all 1s linear; 
    transition: all 1s linear; 
} 

.outerdiv-opaque { 
    opacity: 0.9 !important; 
} 

.innerdiv { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index=-1; 
} 

JS

var innerDiv = $('.innerdiv'); 
setTimeout(function() { 
    innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)'); 
    var outerdiv = $('.outerdiv'); 
    setTimeout(function() { 
     outerdiv.addClass('outerdiv-opaque'); 
    }, 500); 

}, 1000) 

Answer 1

Es gibt buchstäblich ein Dutzend Möglichkeiten, dies zu tun. Hier sind vier grundlegende Beispiele, die reibungslos funktionieren.

Mit CSS Transitions

HTML:

<div class="container"> 
    <div class="outerdiv"> 
    </div> 
    <div class="innerdiv"> 
    </div> 
    <p> 
    content - should remain solid white 
    </p> 
</div> 

CSS:

.container,.outerdiv { 
    background-color: black; 
    position: relative; 
    display: block; 
    height: 500px; 
    width: 500px; 
    color: white; 
} 

.outerdiv,.innerdiv { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.outerdiv{ 
    z-index:1; 
    transition: .5s opacity linear; 
} 

.innerdiv{ 
    background-image: url(http://i.stack.imgur.com/MxR09.png); 
} 

.outerdiv.fadeout{ 
    opacity:0 
} 

.container p{ 
    position:relative; 
    z-index:3; 
} 

JS:

// wait 1 second, add the fadeout class, let the CSS do the rest 
setTimeout(function(){ 
    document.querySelector('.outerdiv').classList.add('fadeout') 
},1000); 

Sehen sie in Aktion:https://jsfiddle.net/kmm8e0x7/8/

---

Mit CSS-Animation

HTML: wie oben

CSS:

.container,.outerdiv { 
    background-color: black; 
    position: relative; 
    display: block; 
    height: 500px; 
    width: 500px; 
    color: white; 
} 

.outerdiv,.innerdiv { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.outerdiv{ 
    z-index:1; 
} 

.innerdiv{ 
    background-image: url(http://i.stack.imgur.com/MxR09.png); 
} 

.outerdiv{ 
    animation: fadeout .5s linear forwards 1s;  
    /* 
    Which is shorthand for: 
     animation-name: fadeout 
     animation-duration: .5s; 
     animation-timing-function: linear 
     animation-fill-mode:forwards; 
     animation-delay: 1s 
    */ 
} 

.container p{ 
    position:relative; 
    z-index:3; 
} 

@keyframes fadeout{ 
    from{opacity:1} 
    to{opacity:0} 
} 

JS: keine (animation-delay Eigenschaft die Notwendigkeit setTimeout entfernt)

Sehen sie in Aktion:https://jsfiddle.net/kmm8e0x7/7/

---

Verwendung von JavaScript

HTML: wie oben

CSS:

.container,.outerdiv { 
    background-color: black; 
    position: relative; 
    display: block; 
    height: 500px; 
    width: 500px; 
    color: white; 
} 

.outerdiv,.innerdiv { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.outerdiv{ 
    z-index:1; 
    transition: .5s opacity linear; 
} 

.innerdiv{ 
    background-image: url(http://i.stack.imgur.com/MxR09.png); 
} 

.container p{ 
    position:relative; 
    z-index:3; 
} 

JS:

var el = document.querySelector('.outerdiv'); 

function fadeout(){ 
    el.style.opacity -= 0.01; 

    if(el.style.opacity !== 0){ 
     requestAnimationframe(fadeout); 
     // this could just as easily be setTimeout(fadeout,t) where t = an increment of time after which to call the next frame 
    } 
} 

// just use setTimeout to wait for 1 second before starting the fadeout 
setTimeout(fadeout,1000); 

Sehen sie in Aktion:https://jsfiddle.net/kmm8e0x7/6/

---

Mit jQuery

HTML: wie oben

CSS: wie oben

JS:

$('.outerdiv').animate({ 
    'opacity': '0' 
}, 500); 

Sehen Sie es in Aktion:https://jsfiddle.net/kmm8e0x7/5/

Answer 2

Trennen Sie die Timeout-Funktionen. die .outerdiv-opake Klasse

.outerdiv-opaque { 
     background-color: white; 
    } 

Ihre timeOut Funktionen nach

var innerDiv = $('.innerdiv'); 
setTimeout(function() { 
    innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)'); 
}, 1000) 

var outerdiv = $('.outerdiv'); 
    setTimeout(function() { 
    outerdiv.addClass('outerdiv-opaque'); 
    }, 500); 

Answer 3

ich eine Pseudo verwenden würde, wie diese, die Ihr Markup halten wird wie und wie die ändern, wie diese aussehen würde, Trennung opacity ist auf dem Pseudo, es wird kein anderes Element beeinflussen.

Statt eines Skripts, benutzte ich einen zusätzlichen Schritt auf die Animation, wo ich es gesagt, seine opacity bei 1 zu halten, bis 60% der Zeit, Animation, bevor es sollte beginnen zu verblassen.

.outerdiv { 
 
    position: relative; 
 
    height: 500px; 
 
    width: 500px; 
 
    color: white; 
 
    background: url(http://i.stack.imgur.com/MxR09.png); 
 
} 
 
.outerdiv::before { 
 
    content: ''; 
 
    background-color: black; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    opacity: 0.5; 
 
    animation: fade 2s linear; 
 
} 
 
.innerdiv { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
p { 
 
    position: relative; 
 
} 
 
     
 
@keyframes fade { 
 
    0% { opacity:1 } 
 
    60% { opacity:1 } 
 
    100% { opacity:0.5 } 
 
}

<div class="outerdiv"> 
 
    <div class="innerdiv"> 
 
    </div> 
 
    <p> 
 
    content - should remain solid white 
 
    </p> 
 
</div>