にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:18:23.

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

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

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

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

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

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

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

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---