(例)【CSS3】background-originの仕様方法
See the Pen
background-origin by linlin (@linlin098765)
on CodePen.
<div class="sample1"></div>
<div class="sample2"></div>
<div class="sample3"></div>
div{
background-image:url("https://www.llc-linlin.com/picture/SEO.jpg");
width:200px;
height:100px;
margin-bottom:20px;
border:dashed 8px black;
padding:10px;
}
.sample1{
background-origin:border-box;
}
.sample2{
background-origin:padding-box;
}
.sample3{
background-origin:content-box;
}
【CSS3】background-origin:背景の基準位置を指定する
CSS3のbackground-originは、背景の基準位置を指定するプロパティです。background-origin:fixedが指定されている場合は無効となります。
- padding-box
背景をパディングボックスに対し相対的に適用(初期値) - border-box
背景をボーダーボックスに対し相対的に適用 - content-box
背景をコンテントボックスに対し相対的に適用