1

正方形の画像を作成し、div の繰り返し背景画像として使用しました。

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

私はそれを適用しました：

background-size: 5% auto;

そして、それは20個のセルが連続すると思っていましたが、そうはなりませんでした. 誰でも私を助けることができますか？

4

2 に答える 2

0

20 個のセルを連続させたい場合は、コンテナーの幅を 412px ではなく 400px にする必要があります。

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

編集

したがって、あなたがやろうとしているのは、背景画像がスケーラブルであり、高さが常に幅である必要がある間、常に x 軸に 20 個のセルを持つようにすることです。したがって、これを達成するのは難しいと思います。私が考えることができるのは、1つの正方形だけでpngまたはsvgを実行し、y軸で繰り返して背景画像として20回挿入することです。通常、固定数のバックグラウンド リピートを設定することはできませんが、これにはちょっとしたハックがあるようです。ここで見つけました: 設定された回数だけ css 背景イメージを繰り返します(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;

したがって、これが機能することを保証することはできませんが、少なくとも試してみることはできます:)

于 2015-12-08T10:17:18.020 に答える