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

Posted 2023-05-08

技术标签:

【中文标题】每次重复时垂直翻转背景图像-y【英文标题】：Flip vertically a background-image every time it repeat-y 【发布时间】：2013-07-30 17:53:27 【问题描述】：

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

我用repeat-y尝试了我脑海中的所有事情，但我没有找到解决方案，甚至在谷歌中搜索。

例子：

直背景图片

重复时翻转背景图像-y

然后又转直了

有办法获得那个位置吗？

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

谢谢大家！

【问题讨论】：

你可以把原图和倒过来的图做成一张，用repeat-y设置为背景 【参考方案1】：

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

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

按照建议，将两个图案组合在一张图片中，这样更简单，并且始终有效。

【讨论】：

【参考方案2】：

我会像这样加载背景图片

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

嘿，快点

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

【讨论】：

【参考方案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 魔术。插入元素与 绝对定位 和 lower z-index 每个 JavaScript 可能一个具有“反转”类，其中包含一些CSS转换来恢复它。 定位也应该在JS中完成 - 例如img1应该有top：0，img2 top：heightOfImages * 1，img3 top：heightOfImages * 2等等。这样做直到达到父元素的高度或用户的分辨率。

不是很漂亮，但可行

【讨论】：

【参考方案4】：

其他答案建议复制和合并背景图像。这可能会增加额外的兆字节下载量，尤其是对于大图像。但是，在大图像的情况下，将它们平铺多少次就足够了，因为您的内容需要覆盖。注意：此方法使用 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;

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

【讨论】：

【参考方案5】：

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

这取决于你的形象。

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

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

否则，解决方案就是复制 div，这总是很不方便...

【讨论】：

以上是关于每次重复时垂直翻转背景图像-y的主要内容，如果未能解决你的问题，请参考以下文章

CSS - 背景图像水平拉伸并垂直重复？

CSS背景图像，根据视口调整大小[重复]