背景のあるボックス要素のボーダーを背景と重ならないように指定する方法

CSSのbackgrond-imageで指定した画像はボックス要素の境界線(border)やpaddingの余白部分にも重なって表示されます。この重なり方を変更することができるCSSが、background-clipです。これを使う事により、borderやpaddingの箇所に背景画像を表示させないように制御することができます。

background-clipには3つの値を設定することができます。

background-clip:border-box;
初期値。背景画像を境界線まで重ね手表示

background-clip:padding-box;
背景画像をパディング領域まで重ねて表示(境界線には重ならない)

background-clip:content-box;
背景画像を境界線とパディング領域まで重ねないで表示

ソースコードはこのように。

→サンプルを用意したのでご覧ください。

これを応用すると、CSSのborderをmargin代わりに使う、なんてこともできると思います。いろいろお試しください。

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project

関連記事


この記事をかいた人

ドレッド Webクリエイター、ライター

Web制作やライティングなどインターネットを使って自由に暮らしているドレッドです。このブログではWeb制作やライティングでお役に立ちそうな知識から、ドレッドのプライベートな出来事まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

CSS | Posted on 2017/02/25 17:37

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です