24

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

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

例子：

背景直背景图像

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

背景再次垂直翻转然后再次翻转到直

有没有办法获得那个位置？

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

谢谢你们！

4

5 回答 5

13

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

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

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

于 2013-07-30T14:21:06.020 回答
4

我会像这样加载背景图像

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

于 2013-11-06T10:08:44.370 回答
2

根据我的评论，这是一个纯 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 等等。这样做直到达到父元素的高度或用户的分辨率。

不是很漂亮但可行

于 2013-07-30T14:22:36.067 回答
2

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

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

于 2014-10-09T14:08:37.813 回答
1

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

这取决于你的形象。

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

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

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

于 2013-07-30T14:21:03.680 回答