2014年7月20日(日) 10時04分51秒 [仕事]

枠線(border)の背後にも、背景画像(background-image)は描かれている

背景画像(background-image)を指定したボックスに枠線(border)を引いたとき、その「枠線の真下」にも背景画像が描かれている……という仕様って、わりと気付きにくいと思うんですけども、どうなんでしょうかね？ みんな知ってるのかな？(^_^;)
私は、それに気付いたときにちょっと驚きました。
なんとなく「枠線」というと『外側に引かれる』というイメージがあるので、枠線の真下の領域まで、「そのボックスの背景画像」が影響するとは思いませんでした。

で、まあそんな驚きを何か記事のネタにできないかな……と考えて(^_^;)、All Aboutの新記事の題材にしました。

■『枠線の真下に描画される背景画像のずれを調整する方法』（＠All About ホームページ作成）

枠線を半透明にしたり、枠線の線種を点線や二重線にしてみると、隙間などから背後が見えます。そうやって確認すると、「枠線の真下にも、そのボックスの背景画像が描画されている」ということが分かります。

ところが、背景画像の「描画開始位置」は『枠線よりも内側』になる仕様なので、枠線の真下にある背景画像は、ちょっとズレているように見えることがあります。（背景に指定した画像次第ですが。タイル状に繰り返すことが前提の「模様」画像だと、特に違和感はないと思います。）

んで、そのズレを防ぐいくつかの方法として、CSS3で新たに追加されたプロパティ「background-clip」や「background-origin」を使う方法を解説しました。
background-clipプロパティでは背景画像の表示範囲を調整できますし、background-originプロパティでは、背景画像の開始位置を調整できます。