スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

background-positionをパーセントで設定する場合の光と闇

超ニッチな話題ですが、CSSでbackground-positionをパーセントで指定したい時に全く想定しない動きをして悩まされました。

下の図を御覧ください。
1-4の数字のボックスを横に並べたいとします。
ラッキーな事に1-4が100pxずつ上下に並んだ画像を見つけたのでここから切り出すことにしましょう。

ダウンロード
http://www.sitepoint.com/examples/jquery/test.php




さて、1を切り出すにはどうすればいいでしょうか?

height:100px;
backgorund-position:0 0;

これで良さそうです。
では2の場合は?

height:100px;
background-position:0 -100px;

これもこれで良さそうです。
元画像は縦に400px、1の数字が邪魔なので上に100pxだけずらしたところから100px分表示するということです。
ではこれをパーセントで表すとどうなるでしょう?

height: 100px;
background-position:0 -25%;

????

先ほどは-100pxとしたので-25%でもよさそうなものです。
しかしこれは誤りです。
正解は、

height: 100px;
background-position: 33.333%;


なぜそうなるのか?
それは、background-positionをパーセントで指定する場合、
「画像を埋め込みたい要素の指定位置=元画像の指定位置」
という形にしなければいけないからです。

全然意味がわからないと思いますのでキチンと説明すると、
上の例では「画像を埋め込みたい要素」とは100pxのボックスのこと、
「元画像」とは1-4が書かれた400pxの画像のことですので、

「100pxの上から33.333%の位置に、400pxの画像の33.333%の位置を持ってくるように100px分切り取る」

という事になります。



なぜこんな仕様に。。
でも純粋に画像を背景として使う場合は便利だということがわかります。
50%を指定すると要素がどんな大きさであっても、常に元画像の中心が要素の中心にくるためです。


上の画像にそれぞれの数字を取得するには何パーセントを設定すればいいかが書かれているので参考にして下さい。

コメント

コメントの投稿

非公開コメント

PR

PR

プロフィール

何でも書くman

Author:何でも書くman
思ったことや備忘録など、とりあえずなんでも書きます。IT系のことや趣味、生活に関わることなども。

ページの先頭へ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。