Установите цвет фона веб-страницы перед загрузкой фонового изображения

У меня есть веб-приложение, а фоновое изображение темного цвета. Он также имеет размер более 100 КБ. (Я не очень ценю, что фоновое изображение является таким большим, но я ничего не могу с этим поделать или тема этого вопроса. Кроме того, это JPEG!.. Веб-дизайн пришел от клиента, а я должны оставить это как есть, несмотря на мои протесты!)

Поскольку фоновое изображение в основном состоит из темных цветов (почти черный), текст белый.

Проблема в том, что при первом обращении пользователя к веб-странице фон белый (фоновый фоновый рисунок по умолчанию), а текст также белый, поэтому вы не можете прочитать какой-либо текст. Только после загрузки фонового изображения вы можете прочитать текст. (Страница загружает файл CSS, это загружает другой файл CSS, и в этом указано фоновое изображение. Таким образом, при подключении с высокой задержкой, таком как мобильное интернет-соединение UMTS, это может занять несколько секунд.)

Можно ли сказать, что "фон этой страницы должен иметь определенное фоновое изображение (как сейчас), но, кроме того, должен иметь цвет черный, т.е. черный будет отображаться до тех пор, пока фоновое изображение не будет загружено, или если оно не будет 't load"? Таким образом, пользователь сможет сразу прочитать текст. Я уверен, что видел это (или был ли этот фон таблицы?), Но, увы, не помню, как и Googling также не помог.

Текущий CSS:

body {
    background: transparent url(bg.jpg) top left no-repeat;
}

Я добавил "черный" в свойство "background", но это не помогло.

Ответ 1

На самом деле это довольно просто, просто измените код, который у вас уже есть:

body {
    background: #000 url(bg.jpg) top left no-repeat;
}

transparent есть цвет фона элемента body, теперь установлен на черный.

Как вы говорите, он загружается медленно (через два файла CSS), он может быть белым. Это можно предотвратить, используя тег <style> в разделе <head> вашего документа:

<style type="text/css">

body {
    background: #000 url(bg.jpg) top left no-repeat;
}

</style>

Это должно сделать черный фон сразу.

Ответ 2

Это должно сделать это

body {
    background: url(bg.jpg) top left no-repeat #000;
}

Это применит цвет черный к вашему телу.

Ответ 3

Предыдущие ответы должны работать, но если они не здесь, это еще один трюк. Вы можете использовать javascript для предварительной загрузки изображения, а затем обновить стиль тела, чтобы использовать изображение, которое вы загрузили в качестве фона.

Вы можете увидеть пример с помощью jquery здесь http://jqueryfordesigners.com/image-loading/. На самом деле, я думаю, что вам нужно.