배경 출처

이 속성은 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>

위 코드의 성능을 보면 알 수 있듯이 콘텐츠 영역부터 배경 이미지가 그려집니다.

그리는 것은 콘텐츠 영역에서 시작해야 한다고 규정되어 있는데 왜 패딩 영역과 테두리 영역에 모두 배경 이미지가 표시됩니까? 여기서는 이러한 차이를 이해해야 합니다. 그림을 그릴 수 있는 것과 개념을 그리기 시작하는 것 사이에는 두 가지 차이점이 있습니다.

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전