-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>定义要使用的图像部分的形状。
rect()函数定义了一个可用作形状的矩形。其参数按此顺序定义图像边缘的顶部，右侧，底部和左侧偏移量。
正式语法
<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(?developer/section/1071975/"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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
