-moz-image-region
-moz-image-region
非标准
此功能是非标准的，不处于标准轨道上.。不要在面向Web的生产站点上使用它：它并不适用于每个用户。实现之间也可能存在很大的不兼容性，而且这种行为在未来可能会发生变化。
对于某些xul元素和伪元素，在使用list-style-image属性时，这些属性用于指定替换整个图像的图像区域。这也允许元素使用同一图像的不同片段来提高性能。
/* 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属性。所有四个值都与图像的左上角相关。
| 初始值 | auto |
|---|---|
| 适用元素 | XUL <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" />. |
| 是否是继承属性 | yes |
| 适用媒体 | visual |
| 计算值 | as specified |
| 动画类型 | discrete |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
注：了解有关在任何背景下工作的系统，可参见-moz-image-rect()...
语法
值
auto自动定义要使用的图像的区域。
正式语法
<shape> | autowhere
<shape> = rect(<top>, <right>, <bottom>, <left>)
示例
#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
}
规范
不属于任何规范。
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | No support | No support | (Yes)-moz | No support | No support | No support |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | No support | No support | (Yes)-moz | No support | No support | No support |
