Отражать по вертикали фоновое изображение каждый раз, когда он повторяется

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

Я пробовал все свои мысли с повторением-y, но я не нашел решения, даже искал его в google.

Пример:

Прямое фоновое изображение

Отраженное фоновое изображение при повторении-y

И затем снова перевернулся на прямой

Есть ли способ получить эту позицию?

Я приму решение в JScript (и его библиотеку), только если нет решения с чистым css.

Спасибо всем!

Ответ 1

Это невозможно сделать с помощью стандартного CSS3, так как нет свойств CSS3 для поворота фонового изображения.

Ссылка: http://www.w3.org/TR/css3-background

Как было предложено, объедините два мотива в одном изображении, намного проще и всегда будет работать.

Ответ 2

Другие ответы предполагали дублирование и объединение фонового изображения. Это может добавить дополнительные мегабайты для загрузки, особенно для больших изображений. В случае больших изображений, однако, может быть достаточно, чтобы их чередовать столько раз, сколько ваш контент требует покрытия. Примечание. Этот метод использует CSS 2D Transforms, которые в настоящее время поддерживают 93%. В браузерах, которые не поддерживаются, преобразования будут игнорироваться, что может даже не иметь значения в зависимости от дизайна.

http://jsfiddle.net/skibulk/6hxeg9cu/

.wrap1 {
    transform: scaleY(-1);
    background: url(http://i.stack.imgur.com/I4hlZ.png) left bottom;
}

.wrap2 {
    transform: scaleY(-1);
    background:
        url(http://i.stack.imgur.com/I4hlZ.png) repeat-x left top,
        url(http://i.stack.imgur.com/I4hlZ.png) repeat-x left 500px;
}

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

Ответ 3

Согласно моему комментарию, это чистое решение CSS.

    yourElementWithBackground{
    background-image : url("http:yourBackgroundURL");
    background-repeat: repeat-y;
    }

Пример (запустите как полную страницу, если она здесь не работает или посмотрите на Fiddle)

body {
    height: 1000px;
    width: 300px;
    background-image : url("http://picload.org/image/odgwcig/unbenannt.png");
    background-repeat: repeat-y;
}

Ответ 4

Исключительно css-решение не возможно imo.

Это зависит от вашего изображения.

Если это статичность, на которой вы используете, чтобы украсить страницу, лучше всего изменить ее, сделав ее в два раза выше и добавив перевернутую копию в нижнюю часть и используя ее непосредственно через стандартный css..

Если это динамический, вы все равно можете генерировать новое изображение (оригинал + перевернутый) как URL-адрес данных через js и использовать его на своем элементе.

В противном случае решение будет дублировать divs, что всегда неудобно...

Ответ 5

Я бы загрузил фоновое изображение так

<style>
body{
    background-image:url('mybackground');
    background-repeat:no-repeat;
}
</style>

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

<script>
var el      =  $('body')[0];
var src     =  $(el).css('background-image').slice(4, -1);
var img     =  new Image();

checkHeight =  function(){    
    if(img.height < window.innerHeight){
       repeatBg();     
    }
}
img.onload  =  checkHeight();
img.src = src;
</script>

Если фон изображения не заполняет всю высоту окна, тогда этот фон требует немедленного повторения/переключения (это увеличит время загрузки); иначе прослушиватели событий могут быть использованы для запуска проверки позже.
Следующая функция рисует изображение в элемент холста и создает dataURL. Исходное изображение src обновляется до нового dataURL, а повтор-фон изменяется от no-repeat до repeat-y (по вертикали);
прослушиватели событий затем удаляются, поэтому функция не вызывается снова.

<canvas style="display:none" id="canvas"></canvas>


<script>

repeatBg = function(){  
    var canvas = $('#canvas')[0];
    var ctx = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height *2 ;
    ctx.drawImage(img,0,0);
    ctx.scale(1, -1);
    ctx.translate(0, -img.height);
    ctx.drawImage(img, 0, -img.height, img.width, img.height);
    var dataURL = canvas.toDataURL();
    $(el).css({
        'background-image' : 'url('+dataURL+')',
        'background-repeat' : 'repeat-y'
    });    
    $(window).off('load, scroll, resize', checkHeight);        
}
$(window).on('load, scroll, resize', checkHeight);



</script>

И hey presto

http://jsfiddle.net/dtjones1988/y49rvu73/6/