이 속성은 CSS3의 새로운 기능입니다. 물론 특정 브라우저 호환성 문제(주로 낮은 버전의 IE 브라우저로 인해)가 있지만 시간이 지나면 CSS3가 주류가 될 것입니다. 다음은 예제 코드와 함께 자세히 설명됩니다. 이 속성.
구문 구조:
background-origin:border-box|padding-box|content-box
매개변수는 각각 배경 이미지가 테두리, 패딩(기본값) 또는 콘텐츠 영역에서 표시되는지 여부를 나타냅니다.
이 속성은 요소 내에서 배경 이미지가 그려지기 시작하는 위치를 지정하는 데 사용됩니다. 물론 배경 이미지가 그려지기 시작하는 위치는 속성 값과 관련되어 있습니다. 아래에.
1.border-box:
이 속성 값은 테두리 영역(테두리 포함)에서 배경 이미지를 그리도록 지정합니다. 코드 예시는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-origin属性-php中文网</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.border-box
{
background-origin:border-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="border-box"></li>
</ul>
</body>
</html>위 코드에서 볼 수 있듯이 테두리 영역을 포함하여 테두리부터 배경 이미지가 렌더링됩니다.
2.padding-box:
패딩 영역을 포함하여 패딩부터 배경 이미지를 그린다고 규정하고 있습니다. 코드 예시는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn" />
<title>background-origin属性-php中文网</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.padding-box
{
background-origin:padding-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="padding-box"></li>
</ul>
</body>
</html>에서 위 코드에서는 배경 이미지가 패딩 영역부터 그려집니다.
Three.content-box:
이 속성 값은 콘텐츠 영역에서 배경 이미지를 그리는 것을 규정합니다. 소위 콘텐츠 영역은 코드 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-origin属性-php中文网</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.content-box
{
background-origin:content-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="content-box"></li>
</ul>
</body>
</html>위 코드의 성능을 보면 알 수 있듯이 콘텐츠 영역부터 배경 이미지가 그려집니다.
그리는 것은 콘텐츠 영역에서 시작해야 한다고 규정되어 있는데 왜 패딩 영역과 테두리 영역에 모두 배경 이미지가 표시됩니까? 여기서는 이러한 차이를 이해해야 합니다. 그림을 그릴 수 있는 것과 개념을 그리기 시작하는 것 사이에는 두 가지 차이점이 있습니다.
다음 섹션