-moz-image-rect

翻译不完整。 请帮助我们翻译这篇文章!

非标准
该特性是非标准的,请尽量不要在生产环境中使用它!

Summary

The -moz-image-rect value for CSS background-image lets you use a portion of a larger image as a background. This allows you to, for example, use different parts of one larger image as backgrounds in different parts of your content.

This works very similarly to the -moz-image-region property, which is used with the list-style-image property to use parts of an image as the bullets in lists. However, this can be used for any CSS background.

The syntax for the rectangle is similar to the rect() function generating a <shape> CSS type. All four values are relative to the upper left corner of the image.

Syntax

-moz-image-rect(<uri>, top, right, bottom, left);

Values

<url>
The URI of the image from which to take the sub-image.
top
The top edge, specified as an <integer> or <percentage>, of the sub-image within the specified image.
right
The right edge, specified as an <integer> or <percentage>, of the sub-image within the specified image.
bottom
The bottom edge, specified as an <integer> or <percentage>, of the sub-image within the specified image.
left
The left edge, specified as an <integer> or <percentage>, of the sub-image within the specified image.

Formal syntax

该属性的语法尚未添加

Example

This example loads an image and uses it in four segments to draw the Firefox logo in four <div> blocks. Clicking on their container causes the four segments to rotate around by swapping the background-image property values among the four <div> blocks.

CSS

The CSS defines one container style, then the styles for the four boxes that comprise the complete image.

The container looks like this:

#container {
  width:267px;
  height:272px;
  top:100px;
  left:100px;
  position:absolute;
  font-size:16px;
  text-shadow:white 0px 0px 6px;
  text-align:center;
}

Then the four boxes defining the segments of the image are defined. Let's look at them one at a time.

#box1 {
  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
  width:133px;
  height:136px;
  position:absolute;
}

This is the top-left corner of the image. It defines a rectangle containing the top-left quarter of the image in the file firefox.jpg.

#box2 {
  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
  width:133px;
  height:136px;
  position:absolute;
}

This defines the top-right corner of the image.

The other corners follow a similar pattern:

#box3 {
  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
  width:133px;
  height:136px;
  position:absolute;
}
#box4 {
  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
  width:133px;
  height:136px;
  position:absolute;
}

HTML

The HTML is quite simple:

<div id="container" onclick="rotate()">
  <div id="box1" style="left:0px;top:0px;">Top left</div>
  <div id="box2" style="left:133px;top:0px;">Top right</div>
  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
</div>

This places the four segments of our image in a two-by-two box grid. These four segments are all contained within a larger <div> block whose primary purpose is to receive click events and dispatch them to our JavaScript code.

The JavaScript code

This code handles the click event when the container receives a mouse click.

function rotate() {
  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
  
  // Now that we've saved the last one, start rotating
  
  for (var i=1; i<=4; i++) {
    var curId = "box" + i;
    
    // Shift the background images
    
    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
    document.getElementById(curId).style.backgroundImage = prevStyle;
    prevStyle = curStyle;
  }    
}

This uses window.getComputedStyle() to fetch the style of each element, shifting it to the following element. Notice that before it begins doing so it saves a copy of the last box's style since it will be overwritten by the third element's style. By simply copying the values of the background-image property from one element to the next with each mouse click, we achieve the desired effect.

What it looks like

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
-moz-image-rect()
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support 4IE No support NoOpera No support NoSafari No support No
Notes
No support No
Notes
Notes See WebKit bug 32177
WebView Android No support NoChrome Android No support NoFirefox Android Full support 4Opera Android No support NoSafari iOS No support No
Notes
No support No
Notes
Notes See WebKit bug 32177
Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.