CSS 每次重复时垂直翻转背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17949490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flip vertically a background-image every time it repeat-y
提问by rpasianotto
I'm searching for a trick that repeat my background image vertically, but every time the image is repeated I want to flip it vertically.
我正在寻找一种垂直重复背景图像的技巧，但每次重复图像时，我都想垂直翻转它。
I tried all the things in my mind with repeat-y but I don't found a solution, even searching for it in google.
我用repeat-y尝试了我脑海中的所有事情，但我没有找到解决方案，甚至在谷歌中搜索它。
Example:
例子：
Straight background-image
直背景图像
Flipped background-image when it repeat-y
重复时翻转背景图像
And then flipped again to straight
然后再次翻转到直线
There is a method to obtain that position?
有没有办法获得那个位置？
I'll accept the solution in JScript (and library of it) only if there isn't a solution with pure css.
仅当没有纯 css 解决方案时，我才会接受 JScript（及其库）中的解决方案。
Thank you all!
谢谢你们！
采纳答案by Marc Audet
This cannot be done using standard CSS3 since there are no CSS3 properties to rotate a background image.
这不能使用标准 CSS3 来完成，因为没有 CSS3 属性来旋转背景图像。
Reference: http://www.w3.org/TR/css3-background
参考：http: //www.w3.org/TR/css3-background
As suggested, combine the two motifs in a single image, much simpler and will always work.
正如建议的那样，将两个图案组合在一个图像中，简单得多并且总是有效。
回答by TarranJones
I would load the background image like so
我会像这样加载背景图像
<style>
body{
background-image:url('mybackground');
background-repeat:no-repeat;
}
</style>
As the image has already loaded we can do a little JavaScript without the browser doing much extra work. we can check whether the height of the image fills the entire window.
由于图像已经加载，我们可以在浏览器不做太多额外工作的情况下执行一些 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>
If the image background does not fill the full height of the window then this background needs repeating/flipping straight away(this will increase load time);
otherwise event listeners can be used to trigger the check later on.
The following function draws the image to the canvas element and creates a dataURL. The background-image src is updated to the new dataURL and repeat-background is changed from no-repeat to repeat-y(vertically);
the event listeners are then remove so the function is not called again.
如果图像背景没有填满窗口的整个高度，则该背景需要立即重复/翻转（这会增加加载时间）；否则事件侦听器可用于稍后触发检查。
以下函数将图像绘制到 canvas 元素并创建一个 dataURL。background-image src 更新为新的 dataURL，repeat-background 从 no-repeat 更改为 repeat-y(vertically)；
然后删除事件侦听器，因此不会再次调用该函数。
<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>
And hey presto
嘿嘿
回答by skibulk
Other answers suggested duplicating and merging the background image. That could add extra megabytes to be downloaded, especially for large images. In the case of large images, however, it might be sufficient to tile them as many times as your content requires coverage. Note: This method uses CSS 2D Transforms, which are currently 93% supported. In browsers that are not supported, the transforms would be ignored, which may not even matter depending on the design.
其他答案建议复制和合并背景图像。这可能会增加额外的下载量，特别是对于大图像。但是，在大图像的情况下，根据内容需要覆盖的次数来平铺它们可能就足够了。注意：此方法使用 CSS 2D Transforms，目前支持93% 。在不受支持的浏览器中，转换将被忽略，这取决于设计甚至可能无关紧要。
http://jsfiddle.net/skibulk/6hxeg9cu/
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;
}
Basically I'm using multiple backgrounds repeating horizontally, and offset vertically. Then I reflected the container. The limitation is that the backgrounds don't repeat forever. So if you don't expect your content to push far down the page, this is an option.
基本上我使用多个水平重复的背景，并垂直偏移。然后我反射了容器。限制是背景不会永远重复。因此，如果您不希望您的内容深入页面，这是一个选项。
回答by Mx.
According to my comment heres a pure CSS solution.
根据我的评论，这是一个纯 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)
示例（如果它在这里不起作用或查看这个Fiddle，则作为整页运行）
body {
height: 1000px;
width: 300px;
background-image : url("http://picload.org/image/odgwcig/unbenannt.png");
background-repeat: repeat-y;
}not really pretty but doable
不是很漂亮但可行
回答by Mabedan
A purely css solution is not possible imo.
imo 不可能使用纯 css 解决方案。
It depends on your image.
这取决于你的形象。
If it's a static on which you use to decorate the page, It's best to just modify it by making it two times taller and adding a flipped copy to the bottom part and using that directly via standard css..
如果它是您用来装饰页面的静态文件，最好只是修改它，使其高两倍，并在底部添加一个翻转的副本，然后直接通过标准 css 使用它。
If it's a dynamic one, you still can generate new image (original+flipped) as data urlvia js and use it on your element.
如果它是动态图像，您仍然可以通过 js生成新图像（原始图像+翻转图像）作为数据 url并在您的元素上使用它。
Otherwise, the solution would be duplicating divs, which is always inconvenient...
否则，解决方案将是重复 div，这总是不方便的......
