背景大小與背景重複計數明顯偏差

我已經創建了方形圖像，並將其用作div的重複背景圖像。

https://jsfiddle.net/cethbqog/2/

我應用了它：背景大小與背景重複計數明顯偏差

background-size: 5% auto;

而且我認爲這將是20個細胞成一排，但它並沒有發生。任何人都可以幫助我嗎？

來源

2015-12-08 Andrey Tsarenko

我想製作一個20 x 6正方形的自適應塊。容器的寬度以％表示。 –

如果你想要它是一個20個單元格，你應該給容器的寬度爲400px而不是412px。

.container { 
    width: 400px; 
    padding-bottom: 30%; 
    background: rgba(0,0,0, .4) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAA3SURBVEhL7cwxEQAgDMVQXP+tNYedKmDBQEbY8u6yZnX3Xr84R86Rc+QcOUfOkXNUVSfJvC9zAWrdZxj51zBJAAAAAElFTkSuQmCC); 
    background-size: 5% auto; 
}

編輯

所以，你正在嘗試做的是使背景圖像總是有一個像20個細胞在x軸上，而它的可擴展性和高度應始終=寬度。所以這很難實現我認爲與背景圖像。我能想到的只是用一個正方形做一個png或svg，然後在y軸上重複插入20次作爲背景圖像。通常情況下，你不能設置的背景下，重複一個固定的數字，但似乎有一點的黑客這個我發現這裏： repeat css background image a set number of times（它不會在IE9和更早）

background-image: url('square.png'), 
        url('square.png'), 
        url('square.png'); 
background-repeat: repeat-y, 
        repeat-y, 
        repeat-y; 
background-size: 5% auto, 
       5% auto, 
       5% auto; 
background-position: left top, 
        5% top, 
        10% top;

這樣我就可以「T向你保證這會工作，但你至少可以嘗試一下:)

來源

2015-12-08 10:17:18

好的，但以百分比的形式應用大小有點奇怪。我可以避免這種行爲，並使它們真的有5％的寬度，就像它對塊的工作方式一樣。 –

Marcel Wasilewski is'nt 5％x 20％= 100％，我檢查它的hapen只在chrome中的firfoxe它的罰款20箱，所以它的意思是這是瀏覽器問題 –

是啊，你將不得不插入背景20次，而不是隻有3，我認爲這是合乎邏輯的... –

Modified a bit to achieve, please check it

.container { 
 
    width: 420px; 
 
    padding-bottom: 30%; 
 
    background: rgba(0,0,0, .4) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAA3SURBVEhL7cwxEQAgDMVQXP+tNYedKmDBQEbY8u6yZnX3Xr84R86Rc+QcOUfOkXNUVSfJvC9zAWrdZxj51zBJAAAAAElFTkSuQmCC); 
 
    background-size: 5.1% auto; 
 
}

來源

2015-12-08 10:23:46 yjs

背景大小與背景重複計數明顯偏差

回答

相關問題