-moz-image-region
비표준: 이 기능은 표준화되어 있지 않습니다. 비표준 기능은 브라우저 지원이 제한적이며 변경되거나 제거될 수 있으므로 프로덕션 환경에서 사용하는 것은 권장되지 않습니다. 그러나 표준 옵션이 없는 특정 상황에서는 적절한 대안이 될 수 있습니다.
XUL 요소와 가상요소들에 대하여 list-style-image 속성을 사용할때 이 속성은 전체이미지에서 사용되는 부분의 령역을 지정합니다. 이것은 요소들이 성능을 향상시키기 위해 같은 이미지의 서로다른 부분을 사용할수 있게 합니다.
css
/* Keyword value */
-moz-image-region: auto;
/* <shape> value */
-moz-image-region: rect(0, 8px, 4px, 4px);
/* Global values */
-moz-image-region: inherit;
-moz-image-region: initial;
-moz-image-region: unset;
문법은 clip속성과 류사합니다. 4개의 값은 모두 이미지의 외쪽 웃모서리로부터 상대적입니다.
| 초기값 | auto |
|---|---|
| 적용대상 | XUL elements and :-moz-tree-image, :-moz-tree-twisty, and :-moz-tree-checkbox pseudo-elements. Note: -moz-image-region only works with elements where the icon is specified using list-style-image. It will not work with XUL <image src="url" />. |
| 상속 | yes |
| 계산 값 | as specified |
| Animation type | discrete |
구문
-moz-image-region: rect(top, right, bottom, left);
형식 구문
Error: could not find syntax for this item
예제
#example-button {
/* display only the 4x4 area from the top left of this image */
list-style-image: url("chrome://example/skin/example.png");
-moz-image-region: rect(0px, 4px, 4px, 0px);
}
#example-button:hover {
/* use the 4x4 area to the right of the first for the hovered button */
-moz-image-region: rect(0px, 8px, 4px, 4px);
}