używaj koloru tła do momentu załadowania obrazu tła - html, css

Mam obraz tła dla elementu div.

Aby obraz tła był ładowany, tło musi mieć inny kolor niż biały.

Nie mogę użyć koloru tła do elementu div kontenera, ponieważ obraz w tle ma przezroczystość i chcę zobaczyć zawartość strony pod spodem.

czy istnieje sposób, aby mieć kolor tła, któryładuje się natychmiast, a kiedy ładowany jest obraz tła, użyj tego? Wiem, że mógłbym to zrobić z JS, ale czy istnieje jakaś metoda zastępcza, którą mogę użyć tylko z css / html?

Odpowiedzi:

Jeśli jesteś absolutnie przeciwko JavaScriptowi z jakiegokolwiek powodu, możesz stworzyć efekt, który mimicy co można uzyskać za pomocą Javascript.

http://jsfiddle.net/8Qk5K/5/

div {
background : url(http://www.st.hirosaki-u.ac.jp/~shimpei/GPS/GPSCMC/images/sphere-transparent.png);
width:500px;
height:500px;
position:relative;
}

.container:before{
width:500px;
height:500px;
position:absolute;
left:0;
top:0;
content:"";
background:#333;
-webkit-animation: fade-out 99999s 1 linear; /* Safari 4+ */
-moz-animation:    fade-out 99999s 1 linear; /* Fx 5+ */
-o-animation:      fade-out 99999s 1 linear; /* Opera 12+ */
animation:         fade-out 99999s 1 linear; /* IE 10+ */
}

@-webkit-keyframes fade-out {
0%   { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
@-moz-keyframes fade-out {
0%   { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
@-o-keyframes fade-out {
0%   { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fade-out {
0%   { opacity: 1; }
0.002% { opacity: 0; }
100% { opacity: 0; }
}

To, co to robi, to:

• dodaj element blokowy nad obrazem z wybranym tłem.
• znikną tło po krótkim czasie (musisz znaleźć odpowiednią ilość, która działa dla twoich treści).
• utrzymuj tło wyblakłe w nieskończonym czasie.

Z drugiej strony, jak zapewne zauważyłeś, jest to, że nie możesz przewidzieć dokładnego czasu, a dla niektórych obraz będzie się ładował, dla innych może jeszcze trochę zostać, dopóki nie zostanie załadowany.

Możesz także dostosować czas zanikania, w zależności od przeglądarki. Jeśli na przykład ktoś uzyskuje dostęp do strony internetowej z IE8, możesz dodać wyższy czas zaniku.

Ponadto, a delay można dodać do animacji, aby uruchomić ją dopiero po pewnym czasie.

Możesz po prostu ustawić stos dwóch reguł CSS.

background-color: #000;
background-image: url("...");

Kolor tła będzie wyświetlany do momentu załadowania obrazu.