Большие фоновые изображения с помощью CSS
Как я могу загрузить изображения для покрытия целого фона как некоторые веб-сайты, с помощью CSS. Не обычное свойство фонового изображения, но я хочу загрузить изображения быстро.
Примеры:
9 ответов
background-image - единственный способ разместить изображения в CSS. Если вы хотите, чтобы он был большим, поместите его в элемент body или контейнер div , который заполняет всю область просмотра.
body {
margin: 0;
padding: 0;
width: 100%;
background-image: url('my_big_image.jpg') norepeat;
}
Если вы используете контейнер div , вы можете установить position: fixed; верх: 0; left: 0 , и изображение останется неподвижным при прокрутке страницы.
В этом нет никакого волшебства. Что касается быстрой загрузки, я не думаю, что вы многое можете сделать, если она не будет повторяться. Если это повторится, убедитесь, что ваше изображение размером с один модуль. Это может быть всего один пиксель в высоту или в ширину в зависимости от содержимого.
Нет никакого волшебства в быстрой загрузке фонового изображения, вы просто:
- У вас быстрый сервер.
- Сжимайте изображение как можно сильнее.
- Сделайте HTML-страницу своей маленькой страницы, чтобы остальные начали загружаться как можно скорее.
- У вас не так много других изображений, которые также нужно загрузить.
- Не нужно загружать много скриптов и других внешних файлов.
Я тот парень, который создал marinayachting.it.
В принципе, есть три способа для большого (и масштабированного) фона: использовать css background-image, растянуть тег с позиционированием: фиксированный или использовать в обоих направлениях .
Лучше всего использовать css background-image с новым классным свойством background-size . Firefox (я думаю, начиная с версии 3.6), Safari, Chrome и Opera поддерживают его (на данный момент с префиксами поставщиков). Плохой парень - это (угадайте!) Internet Explorer. Итак, уловка состоит в том, чтобы настроить таргетинг на IE и Firefox <3.6 через javascript и внедрить растянутый тег в событие onready документа
.
Для ускорения работы экспортируйте изображение размером не более 1024 пикселей (для некоторых изображений лучше подходит даже меньшее разрешение) и размером не более 100 КБ.Конечно, поможет быстрый сервер или даже лучше CDN.
Обратите внимание, что IE до версии 8 отображал растянутые изображения очень некрасиво (линейное масштабирование) и медленнее! Использование проприетарного поставщика css -ms-interpolation-mode: bicubic; немного поможет, но также сделает этот дрянной браузер еще медленнее. Для получения наилучшего качества и производительности вы можете использовать фильтр AlphaImageLoader . Да, то же самое, что использовалось для решения проблем прозрачности png в старом IE6. Например. фоны и анимированная карусель в разделах галереи сайта marinayachting.it загружены с помощью фильтра AlphaImageLoader . В частности, карусель, в которой используются слегка растянутые png-изображения, анимированные с помощью javascript, работала со скоростью 0,5 кадра в секунду без фильтра!
Вы можете установить встроенный стиль, чтобы изображение можно было начать загрузку, не дожидаясь, пока какой-либо css-файл будет готов.
Bing загружает обычное фоновое изображение фиксированного размера. Это не особенно быстро (для меня ...), но, возможно, кажется быстрым, потому что изображение кэшируется после первой загрузки.
Если вы устанавливаете изображение, скажем, картинку в качестве фона, вам нужно сделать его достаточно большим, чтобы он соответствовал размерам экрана. Вы же не хотите, чтобы изображение на вашем сайте повторялось несколько раз на экране. Вероятно, минимальная ширина должна быть 1260 пикселей. Если фон представляет собой простой градиент, вы можете вырезать его небольшую часть в Photoshop и применить к телу следующим образом:
body {
маржа: 0;
заполнение: 0;
фон: #fff url (your / image / location.jpg) repeat-x scroll 0 0;
}
Этот метод можно применить и к div, удачи.
с foo " src = " bar " alt = "">
#foo {width : 100%; высота: 100%; }
(используйте position: absolute; / position: relative; & z-index для наложения слоев по желанию)
На втором примере сайта, alexandraowen.co.nz, если бы вы потратили секунду, чтобы посмотреть на JS, который они используют, вы бы увидели следующее:
// backgrounds --------------------------------------------------------------//
var Backgrounds = {};
Backgrounds.init = function()
{
$('body').each
(
function()
{
var imgsrc = $(this).css('background-image');
if(imgsrc != 'none')
{
imgsrc = imgsrc.slice( imgsrc.indexOf('(') + 1 , -1);
$(this).css('background-image', 'none');
$(this).prepend('');
if($.browser.msie)
{
// ie 7 is the slow kid and we have to strip out quote marks ffs!
$(this).find('div.bg img').attr('src', imgsrc.split('"').join(''));
}
else
{
$(this).find('div.bg img').attr('src', imgsrc);
}
}
}
);
Backgrounds.resizeHandler();
$(window).resize(Backgrounds.resizeHandler);
$('div.bg img').load(Backgrounds.resizeHandler);
}
Backgrounds.resizeHandler = function()
{
var w = $(window).width();
var h = $(window).height();
$('div.bg img').each
(
function()
{
var wr = w / $(this).width();
var hr = h / $(this).height();
var r = Math.max(wr, hr);
var imgw = Math.round($(this).width() * r);
var imgh = Math.round($(this).height() * r);
$(this).width( imgw );
$(this).height( imgh );
var l = Math.round((w/2) - (imgw/2));
$(this).css('margin-left', l+'px');
}
);
}
А также HTML на странице:
<body style="background-image: none; ">
Если вы покопаетесь в их скриптах немного больше, вы сможете увидеть, что они сделали. Но я гарантирую вам, что это не быстрее, чем просто установить свойство background-image.