Расстояния между чередующимися фоновыми изображениями

Я создаю веб-страницу, которая в настоящее время выглядит следующее изображение:Расстояния между чередующимися фоновыми изображениями

enter image description here

То, что я пытаюсь сделать сейчас, это заменить травы изображения с двумя или более переменным фоном изображений. Эти изображения должны повторяться в направлении x. Пример:

bg repeating

серый фон и градиент между травой и серым фоном может быть проигнорирован. Все фоновые изображения - 260x650 пикселей в размере и количестве изображений является статическим.

То, что я пробовал, создает фон, как это:

background: url('bg1.png') 0 0 no-repeat, url('bg1.png') 260px 0 no-repeat

Проблема в том, что я не могу установить repeat-x, потому что должен быть запас 260px между изображениями. This answer to other question утверждает, что такой маржи нет. Я бы предпочел не комбинировать изображения в одном изображении.

Мои ресурсы plain JavaScript, CSS и HTML. Мои целевые браузеры относительно новые (IE 9, но предпочтительнее 8), поэтому не беспокойтесь о старых причудах.

источник

2013-06-11 Aart Stuurman

Это способ проще редактировать изображения и добавить некоторые прозрачные поля ... – MaxArt

Я это понимаю, но я хочу, чтобы мой пользователь мог изменять изображения. –

Я не понимаю http://www1.picturepush.com/photo/a/13298504/img/Anonymous/background.png, вам нужен реальный пробел между ними, или они должны пересекаться каким-то образом. (разные размеры фона только для ширины могут быть в порядке с дизайном травы)? :) Если вы хотите получить пробелы, например, сетку, добавьте лишнее изображение над ней –

See demo here.

Вот функция, которую вы можете использовать:

function changeBodyBackground() { 
    var images = ['http://goo.gl/tQl3t', 'http://goo.gl/6t3lG', 
                  'http://goo.gl/HDzqs'] 
    var imagesWidth = 260; 
    var screenWidthToCover = 3000; // the max resolution expected 
    var i = 1, backgroundStyle = 'url("'+images[0]+'") 0 0 no-repeat'; 
    while (i*imagesWidth < screenWidthToCover) { 
     backgroundStyle += ', url("'+images[i%images.length]+'") ' 
               +(imagesWidth*i)+'px 0 no-repeat'; 
     i++; 
    } 
    document.body.style.background = backgroundStyle; 
}

Редактировать images массив с URL изображений вам нужно. Они будут размещены бок о бок с порядком, заданным в массиве. Кроме того, расстояние между изображениями определяется переменной imagesWidth.

В демонстрационном режиме фон устанавливается при нажатии кнопки. Вы можете, конечно, вызвать функцию на <head>, если хотите, чтобы фоновое изображение было загружено сразу.

источник

2013-06-11 23:18:44 acdcjunior

Это замечательно! В значительной степени я думал о том, что сказал МаксАрт. Я посмотрю, смогу ли я это сделать немного, поэтому он будет ждать изменения размера окна, после чего при необходимости добавит больше изображений. –

Также, спасибо за редактирование изображения. Я слишком молод, чтобы показывать их напрямую. –

Да, нр. Может быть, я тоже помогу с настройкой, так что не стесняйтесь! Ура! – acdcjunior

После игры arround с идеями acdcjunior и MaxArt дал мне, я закончил создание элемента заголовка в верхней части страницы и заполнил его divs фоновым изображением. Я использовал divs вместо длинного фонового стиля, потому что я считаю этот способ более удобным. Таким образом, мне не нужно беспокоиться о размере фонового изображения, хотя в моем вопросе я указал, что все они имеют одинаковый размер.

Моя HTML структура выглядит следующим образом:

<header><div class=bg data-bgNumber=1 style="background-image:url('header1.png')"></div></header>

CSS:

header { 
    white-space: nowrap; 
    height: 260px; 
    display: inline-block; 
    max-width: 100%; 
    overflow:hidden; 
} 

header .bg { 
    width: 650px; 
    height: 260px; 
    display: inline-block; 
    background: no-repeat center; 
    background-size: cover; 
}

JS для класса заголовка:

function Header() { 
    this.header = document.body.getElementsByTagName('header')[0]; 
    this.makeHeader(4); 
    window.onresize = function() { 
     this.makeHeader(4); 
    }.bind(this); 
} 
Wrapper.prototype = { 
    makeHeader: function(difBgCount) { 
     while(this.header.offsetWidth < document.body.clientWidth) { 
      var bg = 1+this.header.lastElementChild.getAttribute('data-bgNumber')%difBgCount; 
      this.header.innerHTML += '<div class=bg data-bgNumber='+bg+' style="background-image:url(\'header'+bg+'.png\')"></div>'; 
     } 
    } 
}

Затем, когда документ будет готов, вы создаете новый экземпляр класса заголовка, и все будет хорошо:

var header; 
function onBodyLoad() { 
    wrapper = new Header(); 
}

Аргументом для функции makeHeader является количество различных фоновых изображений. Эти изображения должны быть названы «header1.png», «header2.png» и т. Д., Но изменить имя и расширение не обязательно, если вы хотите, чтобы он назывался по-разному.

Наконец, это выглядит, когда изображения разных размеров: No zoom

и масштаб изображения: enter image description here

источник

2013-06-12 13:30:22

В этом была ошибка: если последнее изображение было слишком большим, чтобы поместиться на странице, появится горизонтальная полоса прокрутки. Я исправил это, применив max-width: 100% и overflow: скрытый для тега заголовка. Я также исправил небольшую ошибку, в которой вычисление будет использовать ширину экрана плюс полосу прокрутки, которая создаст бесконечный цикл. –

Расстояния между чередующимися фоновыми изображениями

ответ

Смежные вопросы