每当它重复时垂直翻转背景图像-y

我在寻找垂直重复背景图像的技巧，但每次图像重复时，我都想垂直翻转。每当它重复时垂直翻转背景图像-y

我用repeat-y尝试了所有的想法，但是我没有找到解决方案，甚至在google中搜索它。

实施例：

Background 直背景图像

Background flipped vertically 翻转背景图像时，它重复-Y

Background flipped vertically again 然后再次翻转以直

有以获得方法那个位置？

只有在没有纯css解决方案的情况下，我才会接受JScript中的解决方案（以及它的库）。

谢谢大家！

来源

2013-07-30 rkpasia

您可以将原始图像和反转图像制作成一张图像，并将它们设置为repeat-y的背景 –

这可因为没有CSS3属性旋转背景图像不使用标准的CSS3来完成。

参考：http://www.w3.org/TR/css3-background

至于建议，结合这两个主题在一个单一的形象，更简单，就没有问题。

来源

2013-07-30 14:21:06

纯粹的css解决方案是不可能的imo。

这取决于你的形象。

如果它在你用它来装点页面静态的，这是最好的只是使它两次高并增加了翻转拷贝到底部并使用通过标准的CSS直接修改它..

如果它是一个动态的，你仍然可以通过js生成新的图像（原始+翻转）为data url并在你的元素上使用它。

否则，解决办法是复制的div，这始终是不方便......

来源

2013-07-30 14:21:03 Mabedan

根据我的评论继承人一个纯粹的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; 
 
}

如果你依赖，并恢复它，你可以做一些JavaScript的魔力。插入元件与 绝对定位和每一个的JavaScript下 z索引可 一个与类“反向”其中包含一些CSS变换以恢复它。 定位也应该在JS中完成 - 例如，img1应该有top：0，img2 top：heightOfImages * 1，img3 top：heightOfImages * 2等等。直到达到父元素的高度或用户的分辨率，执行此操作。

算不上漂亮，但可行

来源

2013-07-30 14:22:36

我会加载背景图像像这样

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

Background

由于图像已经加载，我们可以不需要浏览器做多一点点的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更新为新的dataURL，并将重复背景从无重复更改为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>

和变戏法似的

flipped

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

来源

2013-11-06 10:08:44 TarranJones

我创建了一个局部解决方案/黑客工具，在某些情况下工作。也许别人会觉得它有用。您的内容无法在网页上过多推送，并且仅适用于非常大的背景图片。

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

基本上我使用多个背景水平重复，和垂直偏移。然后我反映了容器。限制是背景不会永远重复。因此，如果您不希望自己的内容向下推到页面上，这是一个选项。

来源

2014-10-09 14:08:37 skibulk

每当它重复时垂直翻转背景图像-y

回答

相关问题