Question

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

我用重复的方式尝试了所有的事情，但我没有找到解决方案，甚至在谷歌搜索它。

示例：

Background 直背景图片

Background flipped vertically 在repeat-y

时翻转背景图片

Background flipped vertically again 然后再次翻转到

有一种获得该位置的方法吗？

只有在没有纯css的解决方案时，我才会接受JScript（及其库）中的解决方案。

谢谢大家！

Answer 1

使用标准CSS3无法做到这一点，因为没有CSS3属性可以旋转背景图像。

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

正如所建议的那样，将两个图案组合在一个图像中，更简单，并且始终有效。

Answer 2

其他答案建议复制和合并背景图片。这可能会增加额外的兆字节数量，特别是对于大型图像。但是，如果是大图像，则可能需要将它们平铺多次，因为内容需要覆盖。注意：此方法使用CSS 2D变换，目前为93％supported。在不受支持的浏览器中，转换将被忽略，这可能根据设计而不重要。

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

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

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

如果你依赖于使用单个图像并将其还原，那么你可以做一些JavaScript魔法。使用绝对定位插入元素，为每个JavaScript插入更低的z-index 可以带有“反向”类的一些css转换来还原它。 定位也应该在JS 中完成 - 例如img1应该有top：0，img2 top：heightOfImages * 1，img3 top：heightOfImages * 2等等。执行此直到达到父元素的高度或用户的分辨率。

不是很漂亮但可行

Answer 4

我会像这样加载背景图片

<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。 background-image src更新为新的dataURL，repeat-background从no-repeat变为repeat-y（vertical）;
然后删除事件侦听器，以便不再调用该函数。

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

嘿presto

flipped

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

Answer 5

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

这取决于你的形象。

如果它是一个用于装饰页面的静态，最好只修改它两倍，然后在底部添加一个翻转的副本并直接通过标准的css使用它。

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

否则，解决方案将重复div，这总是不方便......

每次重复时垂直翻转背景图像

5 个答案: