Ładowanie koloru tła CSS rgba przed nieprzezroczystością

Question

Mam obraz zajmujący całą zawartość ekranu. Ponad nim znajduje się div, który zajmuje cały obszar ekranu. Element div ma background: rgba(0,0,0,.5);, dzięki czemu obraz za nim wygląda ciemniej. Działa wspaniale, z wyjątkiem tego, że po załadowaniu strony cały ekran jest pokryty szarym tłem, zanim zastosuje się krycie i widzę obraz pod spodem.

Czy jest jakiś sposób, aby obraz i element div (z opacity zastosowane) pojawiły się w tym samym czasie? Nie chcę widzieć dużego bloku szarego podczas ładowania strony.

Answer 1

to powinien to zrobić dla ciebie https://jsfiddle.net/c259LrpL/26/

To będzie czekać aż obrazy są ładowane następnie dokonać img i div widoczny w tym samym czasie ... Myślę

<img id="img1" src="http://lorempixel.com/1200/1200/sports/1/" style="visibility: hidden" > 
<div id="over" style="visibility: hidden" > 

</div> 
<script> 
    $(window).on("load", function() { 
    $("#img1").css("visibility", "visible"); 
    $("#over").css("visibility", "visible"); 
    }); 
</script> 

Answer 2

rozważyć ten pomysł. Użyjemy pseudoklaski :after z właściwości tła kontenera <img> (w moim przykładzie: <figure>) w celu kontrolowania ciemnienia. Po pełnym załadowaniu strony dodajemy klasę .loaded do body. To robi 2 rzeczy jednocześnie:

1. przejścia nieprzezroczystość od 0 do 1 na <figure>
2. przejściowym półprzezroczysty t? (0, 0, 0, 0,5), w przezroczystej

window.onload = init; 
 

 
function init() { 
 
    document.body.classList.add("loaded"); 
 
}

body, 
 
figure{ 
 
    margin: 0; 
 
} 
 

 
figure { 
 
    position: fixed; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    opacity: 0; 
 
    transition: 2s opacity; 
 
} 
 

 
img { 
 
    width: 100vw; 
 
} 
 

 
figure:after { 
 
    transition: 2s background; 
 
    background: transparent; 
 
    content: ''; 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    position: absolute; 
 
} 
 

 
.loaded figure:after { 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.loaded figure { 
 
    opacity: 1; 
 
}

<figure> 
 
    <img src="https://images.unsplash.com/photo-1432637194732-34cedd856522?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=a135be75b0fa480c18b22b5e557f56b3" alt="">  
 
</figure>

http://codepen.io/antibland/pen/EKrVKr

Answer 3

Cóż, możesz poczekać, aż przeglądarka zakończy ładowanie wszystkich obrazów, a następnie powoli zmienić przezroczystość, tak jak efekt przenikania. Oto podgląd:

var imageElement = document.getElementById('image'); 
 
var overlayElement = document.getElementById('overlay'); 
 
window.addEventListener("load", function() { 
 
    imageElement.style.opacity = "1"; 
 
    overlayElement.style.opacity = "1"; 
 
}, false);

body { 
 
    position: relative; 
 
} 
 
#image, 
 
#overlay { 
 
    width: 1000px; 
 
    height: 800px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    opacity: 0; 
 
    transition: all 2s ease-in-out; 
 
    -webkit-transition: all 2s ease-in-out; 
 
} 
 
#overlay { 
 
    background: rgba(0, 0, 0, 0.5); 
 
}

<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg"> 
 
<div id="overlay"></div>

To zwykły javascript. Wiem, że tag mówi tylko css, ale to, czego chcesz, nie jest możliwe tylko przy pomocy css. Szybko utworzyłem efekt nakładki, nie zwracaj uwagi na css z wyjątkiem: opacity: 0; i transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out w celu uzyskania efektu przenikania.

W javascript działa w ten sposób: Tworzę 2 zmienne, które pobierają elementy z DOM. Obraz ma identyfikator image, a nakładka ma identyfikator overlay. Następnie ustawiamy listę zdarzeń w naszym oknie. Gdy okno jest całkowicie załadowane, powinno wykonać wszystko w funkcji. Zmętnienia obrazu i nakładki są ustawione na 1 (widoczne). Dzięki naszej usłudze css transition zarządzamy efektem wejścia.