-moz-image-region

非标准：此功能是非标准的，不在标准化轨道上。不要在面向 Web 的生产网站上使用它：它不会对每个用户都起作用。实现之间也可能存在很大差异，并且行为在将来可能会发生变化。

对于某些使用来自 list-style-image 属性的图像的 XUL 元素和伪元素，此属性指定图像中用作整个图像替代的区域。这允许元素使用同一图像的不同部分来提高性能。

语法类似于 clip 属性。所有四个值都相对于图像的左上角。

语法

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;

值

auto: 自动定义要使用的图像区域。
<shape>: 定义要使用的图像部分的形状。rect() 函数定义一个要作为形状使用的矩形。它的参数按此顺序定义图像边缘的顶部、右侧、底部和左侧偏移量。

正式定义

初始值	`auto`
应用于	XUL `<image>` 元素和 `:-moz-tree-image`、`:-moz-tree-twisty` 和 `:-moz-tree-checkbox` 伪元素。注意：`-moz-image-region` 仅适用于使用 `list-style-image` 指定图标的 `<image>` 元素。它不适用于 XUL `<image src="url" />`。
继承	是
计算值	如指定
动画类型	离散

正式语法

 -moz-image-region =
   <shape> | auto

示例

裁剪图像

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

规范

不是任何标准的一部分。

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

-moz-image-rect()