background-clip 및 background-origin은 CSS3에 추가된 새로운 배경 모듈 속성으로, 배경 위치를 결정하는 데 사용됩니다.
background-clip은 배경에 테두리 영역이 포함되어 있는지 확인하는 데 사용됩니다. 그리고 background-origin은 background-position 계산을 위한 기준 위치를 결정하는데 사용됩니다.
구문은 다음과 같습니다.
배경 클립: [테두리 | 패딩] [, [테두리 | |
배경 클립의 경우:
패딩 값인 경우 배경은 패딩 가장자리를 무시하고 테두리는 투명합니다. 테두리 값인 경우 배경에 테두리 영역이 포함됩니다. 배경 이미지 이미지가 여러 개인 경우 해당 배경 클립 값은 쉼표로 구분됩니다.
배경 출처의 경우:
패딩 값인 경우 위치는 패딩 가장자리를 기준으로 합니다("0 0"은 패딩 가장자리의 왼쪽 위 모서리이고 "100% 100%"는 오른쪽 아래 모서리입니다). 테두리 값인 경우 상대적인 테두리 가장자리를 의미합니다. 테두리 값은 콘텐츠 가장자리를 기준으로 합니다. background-clip과 마찬가지로 여러 값은 쉼표로 구분됩니다. background-clip이 padding 값, background-origin이 border 값, background-position이 "top left"(기본 초기값)이면 배경 이미지의 왼쪽 상단이 잘립니다.
이 두 속성은 CSS3에서만 나타납니다. 이 속성이 사용되지 않을 때 백그라운드 모듈의 기본 동작은 어떻습니까?
| 배경 클립의 기본값은 배경 클립:테두리와 같습니다. background-origin의 기본값은 background-origin:padding과 같은 것입니다. |
하지만 IE는 특별한 경우입니다.
IE6 및 IE7에서 일반 요소(버튼 등 제외)의 배경은 background-clip:border;
hasLayout 요소(및 버튼 등)의 배경은 background-clip:padding;
이 CSS3 속성 쌍은 Mozilla, Safari 3 및 Konqueror와 같은 브라우저에서 구현되었지만 모두 개인 속성을 통해 표현됩니다.
기본 비 IE 브라우저의 비공개 속성은 일반적으로 -xxx-로 시작하고, -o-는 Presto를 엔진으로 사용하는 Opera의 경우 비공개이고, -icab-는 iCab의 경우 비공개이며, -khtml-은 KHTML을 엔진으로 사용하는 브라우저입니다. (예: Konqueror Safari), -moz-는 Mozilla의 Gecko 엔진(예: Firefox, Mozilla)을 기반으로 하는 브라우저입니다. -webkit-은 Webkit 렌더링 엔진(KHTML의 파생물)을 기반으로 하는 브라우저(예: Safari, Swift)입니다. ) .
즉, 지원되는 개인 속성은 다음과 같습니다.
| -moz-배경-클립 -웹킷-배경-클립 -khtml-배경-클립 -moz-배경-원산지 -웹킷-배경-원산지 -khtml-배경-원산지 |
다음은 background-origin 속성을 사용하는 간단한 예입니다. 효과는 다음과 같습니다.
HTML 코드:
CSS 코드:
버튼 { border:3px double #95071b;/*3px 이중 테두리를 사용하여 디자인의 흰색 선 시뮬레이션*/ 배경색:#95071b; /*배경 자르기 방법 및 안내선 설정*/ -moz-배경-원산지:패딩; /*앞으로 호환*/ 색상:#fff; /*IE6에서 높이 문제 수정*/ |
단점: Opera에서는 이 효과를 얻을 수 없습니다. 물론 이것은 HTML 코드에 집착하는 사람들을 위한 해결책일 뿐입니다(background-clip 및 background-origin 속성에 대한 학습 및 이해로 제한됨). 물론 CSS를 더 간결하게 만들 수 있는 다른 방법을 시도해 볼 수도 있습니다. 다양한 방법의 장점에 대해 단점은 판단에 달려 있습니다.