CSS

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

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代わりに使う、なんてこともできると思います。いろいろお試しください。

ABOUT ME
アバター
ドレッド
ライティングやWeb制作などインターネットを活用して毎日を自由に生活してるドレッドのブログです。Web制作のちょっとしたテクニックや、趣味で勉強している各種資格、放送大学での学びの記録、そして毎月買った本についての記録を残しています。
お気軽にご相談下さい!

このブログの運営者にお仕事を依頼しませんか?

コレカラウェブ

現在はフリーランスのクリエイターとして、ウェブメディアのライティングやホームページ制作、コンサルティングをしています。まずは事業用サイト「コレカラウェブ」にアクセスしていただき、お気軽にお問い合わせください。メールでのご相談は無料です。皆様からのご連絡お待ちしております。

コレカラウェブ公式サイトへ

関連記事

COMMENT

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

CAPTCHA