IT

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

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

ABOUT ME
アバター
ドレッド
目標必達のために鬼努力を惜しまない個人事業主。フリーライターとWeb制作のお仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。中小企業診断士とFP1級を目指してハードに勉強中。

COMMENT

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

CAPTCHA