我已經創建了方形圖像,並將其用作div的重複背景圖像。
https://jsfiddle.net/cethbqog/2/
我應用了它:背景大小與背景重複計數明顯偏差
background-size: 5% auto;
而且我認爲這將是20個細胞成一排,但它並沒有發生。 任何人都可以幫助我嗎?
我已經創建了方形圖像,並將其用作div的重複背景圖像。
https://jsfiddle.net/cethbqog/2/
我應用了它:背景大小與背景重複計數明顯偏差
background-size: 5% auto;
而且我認爲這將是20個細胞成一排,但它並沒有發生。 任何人都可以幫助我嗎?
如果你想要它是一個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向你保證這會工作,但你至少可以嘗試一下:)
好的,但以百分比的形式應用大小有點奇怪。我可以避免這種行爲,並使它們真的有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;
}
我想製作一個20 x 6正方形的自適應塊。容器的寬度以%表示。 –