每當它重複時垂直翻轉背景圖像-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

回答

相關問題