ホームページ制作

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

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

===

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
コレカラウェブ
コレカラウェブです。フリーランスとしてWebライティング・SEOコンサルティング・メディア運営・障害者支援のお仕事を一貫して承ってきました。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。所有資格:認定SEOコンサルタント・SEO検定1級・Webライティング実務士・ウェブ解析士・応用情報技術者・情報セキュリティスペシャリスト・FP2級・AFPなど。

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA