Вопрос по css3, css, css-position, background-position, javascript – Переверните вертикально фоновое изображение каждый раз, когда оно повторяется

12

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

Я перепробовал все вещи в своем уме с repeat-y, но я не нашел решения, даже искал его в Google.

Пример:

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

 Перевернутое фоновое изображение при повторении

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

Есть способ получить эту должность?

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

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

Вы можете сделать одно изображение из оригинала и наоборот и установить их в качестве фона с помощью repeat-y Mx.

Ваш Ответ

5   ответов
1

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

<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>

Если фон изображения не заполняет всю высоту окна, тогда этот фон нужно сразу же повторить / перевернуть (это увеличит время загрузки); в противном случае прослушиватели событий могут быть использованы для запуска проверки позже.
Следующая функция рисует изображение в элементе canvas и создает dataURL. Src background-image обновляется до нового 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>

И эй престо

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

3

Это может добавить дополнительные мегабайты для загрузки, особенно для больших изображений. Однако в случае больших изображений может быть достаточно поместить их в мозаику столько раз, сколько требуется вашему контенту. Примечание. Этот метод использует 2D-преобразования CSS, которые в настоящее время составляют 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;
}

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

2

это чистое решение CSS.

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

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

body {
    height: 1000px;
    width: 300px;
    background-image : url("http://picload.org/image/odgwcig/unbenannt.png");
    background-repeat: repeat-y;
}
Если вы полагаетесь на использование одного изображения и возвращаете его, вы можете использовать магию JavaScript. Вставитьэлементы с участиемабсолютное позиционирование инижний z-индекс за JavaScript можетодин с классом "обратный" который содержит некоторые преобразования CSS, чтобы вернуть его.Позиционирование должно быть сделано в JS тоже - например, img1 должен иметь top: 0, img2 top: heightOfImages * 1, img3 top: heightOfImages * 2 и так далее. Сделай этопока вы не достигли высоты вашего родительского элемента или разрешения пользователя.

не очень красиво, но выполнимо

5

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

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

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

1

Это зависит от вашего имиджа.

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

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

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

Похожие вопросы