Я ищу трюк, который повторяет фоновое изображение по вертикали, но каждый раз, когда изображение повторяется, я хочу перевернуть его по вертикали.
Я пробовал все свои мысли с повторением-y, но я не нашел решения, даже искал его в google.
Пример:
Прямое фоновое изображение
Отраженное фоновое изображение при повторении-y
И затем снова перевернулся на прямой
Есть ли способ получить эту позицию?
Я приму решение в JScript (и его библиотеку), только если нет решения с чистым css.
Спасибо всем!
Это невозможно сделать с помощью стандартного CSS3, так как нет свойств CSS3 для поворота фонового изображения.
Ссылка: http://www.w3.org/TR/css3-background
Как было предложено, объедините два мотива в одном изображении, намного проще и всегда будет работать.
Другие ответы предполагали дублирование и объединение фонового изображения. Это может добавить дополнительные мегабайты для загрузки, особенно для больших изображений. В случае больших изображений, однако, может быть достаточно, чтобы их чередовать столько раз, сколько ваш контент требует покрытия. Примечание. Этот метод использует 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;
}
В основном я использую несколько фонов, повторяющихся по горизонтали и смещенных по вертикали. Затем я отразил контейнер. Ограничение состоит в том, что фоны не повторяются навсегда. Поэтому, если вы не ожидаете, что ваш контент будет продвигаться далеко по странице, это вариант.
Согласно моему комментарию, это чистое решение 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;
}Исключительно css-решение не возможно imo.
Это зависит от вашего изображения.
Если это статичность, на которой вы используете, чтобы украсить страницу, лучше всего изменить ее, сделав ее в два раза выше и добавив перевернутую копию в нижнюю часть и используя ее непосредственно через стандартный css..
Если это динамический, вы все равно можете генерировать новое изображение (оригинал + перевернутый) как URL-адрес данных через js и использовать его на своем элементе.
В противном случае решение будет дублировать divs, что всегда неудобно...
Я бы загрузил фоновое изображение так
<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
