CSS - -moz-image-region

For a system that works on any background, see -moz-image-rect.

Example

 

CSS
#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);
}

Syntax  

CSS
<a href="css/-moz-image-region#shape"><shape></a><p>where <br><code><shape> = rect(<top>, <right>, <bottom>, <left>)</code></p>

Description  

For certain XUL elements and pseudo-elements that use an image from the list-style-image property, this property specifies a region of the image that is used in place of the whole image. This allows elements to use different pieces of the same image to improve performance.

The syntax is similar to the clip property. All four values are relative to the upper left corner of the image.

Initial valueauto
Applies toXUL <image> elements and :-moz-tree-image, :-moz-tree-twisty, and :-moz-tree-checkbox pseudo-elements. Note: -moz-image-region only works with <image> elements where the icon is specified using list-style-image. It will not work with XUL <image src="url" />.
Inheritedyes
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/-moz-image-region

CSS CSS Reference Non-standard Reference