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

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

Я перепробовал все, что мог, с помощью Repeat-y, но не нашел решения, даже ища его в Google.

Пример:

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

Фон перевернут по вертикалиПеревернутое фоновое изображение, когда оно повторяется-y

Фон снова перевернут вертикальноА затем снова перевернут прямо

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

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

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


javascript css css-position background-position
person rpasianotto    schedule 30.07.2013    source источник
comment
Вы можете сделать одно изображение из оригинала и перевернутого и установить их в качестве фона с помощью Repeat-y   -  person Mx.    schedule 30.07.2013

Ответы (5)


arrow_upward
11
arrow_downward

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

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

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

person Marc Audet    schedule 30.07.2013

arrow_upward
3
arrow_downward

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

<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 обновляется до нового URL-адреса данных, а Repeat-background изменяется с 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/

person TarranJones    schedule 06.11.2013

arrow_upward
2
arrow_downward

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

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

Example (run in as full page if it doesn't work here or look at this Fiddle) 

body {
    height: 1000px;
    width: 300px;
    background-image : url("http://picload.org/image/odgwcig/unbenannt.png");
    background-repeat: repeat-y;
}
If you rely on using a single image and revert it, you could do some JavaScript magic. Insert elements with absolute positioning and a lower z-index per JavaScript may one with class "reversed" which contains some css transformation to revert it. The Positioning should be done in JS too - for example img1 should have top: 0, img2 top: heightOfImages* 1, img3 top: heightOfImages* 2 and so on. Do this until you reached the height of your parent Element or the User's resolution.

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

person Mx.    schedule 30.07.2013

arrow_upward
2
arrow_downward

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

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

person skibulk    schedule 09.10.2014

arrow_upward
1
arrow_downward

Чисто CSS-решение невозможно.

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

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

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

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

person Mabedan    schedule 30.07.2013