背景画像の表示エリアを指定するには?
要素書式
対応ブラウザ
値一覧
値 | 内容 |
範囲指定 | 指定できる値は次の通りです。 「border-box」:ボーダー領域の内側に背景を表示します。 「padding-box」:パティング領域の内側に背景を表示します。 「content-box」:コンテント(内容)領域内に背景を表示します。 なお、「background-clip」プロパティの初期値は「border-box」となります。 |
解説文
background-clipプロパティを使うと、背景を表示する範囲を指定することができます。
なお、ルート要素にすでに異なる背景が存在する場合は、background-clipプロパティを指定しても効果がありません。
また、指定される背景は常にボーダーの背後に表示されます。
サンプルソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
p{
width:400px;
height:100px;
padding:15px;
border:20px dashed #cc0099;
font-size:30px;
background: url(bg1.png);
}
#sample1{
background-clip:border-box;
}
#sample2{
background-clip:padding-box;
}
#sample3{
background-clip:content-box;
}
</style>
</head>
<body>
<p id="sample1">背景をボーダー領域の内側に表示します。</p>
<p id="sample2">背景をパティング領域の内側に表示します。</p>
<p id="sample3">背景をコンテント(内容)領域内に表示します。</p>
</body>
</html>
下記画像を、サンプルソースで指定しているフォルダに保存して下さい。初期状態では、サンプルソースと同じ階層のフォルダが指定されています。
関連項目