-moz-image-region

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

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.

/* 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;

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

注意： For a system that works on any background, see -moz-image-rect() .

句法

值

auto
<shape>: A shape defining the part of the image to use. The rect() function defines a rectangle to use as shape. Its parameters define the top, right, bottom, and left offsets of the edges of the image, in this order.

形式定义

初始值	`auto`
适用于	XUL `<image>` elements and `:-moz-tree-image` , `:-moz-tree-twisty` ，和 `:-moz-tree-checkbox` pseudo-elements. 注意： `-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
计算值	如指定
动画类型	discrete

形式句法

<shape> | autowhere 
<shape> = rect(<top>, <right>, <bottom>, <left>)

范例

Clipping an image

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

规范

Not part of any standard.

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`-moz-image-region` 非标	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 1	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 4	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持
非标。预期跨浏览器支持较差。

另请参阅

-moz-image-rect()

元数据

最后修改： Jul 28, 2020

在此页

句法

值

形式定义

形式句法

范例

Clipping an image

规范

浏览器兼容性

图例

另请参阅

相关话题