Html&CSS/html5&css3
0226_html5/css3_background-origin
.Epona.
2020. 3. 4. 02:32
<style>
/*background-origin */
.origin div{width:800px; height: 250px;
border:10px solid rgba(0, 0, 0, 0.5); /*r, g, b, 투명도*/
margin-bottom: 10px;
padding:30px;
background:url(img1.gif) no-repeat;
}
.origin .padding{ background-origin: padding-box }
.origin .border{ background-origin: border-box }
.origin .content{ background-origin: content-box }
</style>
</head>
<body>
<h3>[background-origin]: 배경이미지의 기준 위치 지정</h3>
<div class="origin">
<div class="padding">배경이미지의 기준 위치를 padding으로:border라인 안쪽에서부터</div>
<div class="border">배경이미지의 기준 위치를 border으로:border라인 뒤에서부터</div>
<div class="content">배경이미지의 기준 위치를 content로:content영역(텍스트위치)에서 부터</div>
</div>
</body>