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

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;
背景画像を境界線とパディング領域まで重ねないで表示

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

.box {
	box-sizing: border-box;
	background-image: url(bg.jpg);
	width:300px;
	height:200px;
	padding:15px;
	border:15px dashed #000;
}
.padding {
	background-clip: padding-box;
}
.content {
	background-clip: content-box;
}

<p>background-clip:border-box; の例</p>
<div class="box border"></div>
<hr>
<p>background-clip:padding-box; の例</p>
<div class="box padding"></div>
<hr>
<p>background-clip:content-box; の例</p>
<div class="box content"></div>
<hr>

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

＝＝＝

コレカラウェブではWebライティングのお仕事を承っております。豊富な実務経験や国家資格を生かして、SEOに強い完全オリジナルな文章を作成いたします。公式noteにてポートフォリオを掲載していますので、こちらも併せてご覧ください。ご相談・ご依頼はお問い合わせページからお願いいたします！

「いいね！」と思ったら、クリックお願いいたします<m(__)m>