概要
css3の背景の適用範囲を指定するbackground_clipについて説明します
プロパティ名
background_clip
内容
背景の適用範囲を指定します
設定値
設定値名 | 設定値内容 |
---|---|
border-box | ボーダーボックス |
padding-box | パディング |
content-box | コンテント |
サンプル
<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>background_clip</title> <style type="text/css"> p { border-style:dashed; border-width:10px; border-color:#000; width:300px; height:100px; padding:10px; } p#contents1 { background-image:url("background_clip.png"); background-clip:border-box; } p#contents2 { background-image:url("background_clip.png"); background-clip:padding-box; } p#contents3 { background-image:url("background_clip.png"); background-clip:content-box; } </style> </head> <body> <p id="contents1">border-box</p> <p id="contents2">padding-box</p> <p id="contents3">content-box</p> <hr /> 以下、背景画像 <img src="background_clip.png" alt="" width="" height="" /> </body> </html>