CSSでscaleYを使用して背景画像を3分割せず1枚で済ませる方法例えば上下対称のこのような画像を背景画像として使用する場合、上部・中部・下部で3分割して利用されることが多い。 しかし、CSSのscaleY: -1とbackround-positionをうまく使用すれば1枚の画像で済ませることができる。 上部・中部を切り出して横に並べる まず上部・中部の部分を切り出してこのように並べる。 スプライト画像は画像と画像の間に余白がないとズームしたときにとなりにある画像の一部が表示されてしまうことがあるので必ず画像同士はくっつけずに余白を入れてはなしておく。 そして上下に左側の部分を読み込む。 #outer::before, #outer::after { display: block; content: ""; width: 200px; height: 20px; background: url(bg_pink.png) no-repeat; } このまま
