非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。
-moz-image-rect
value for
CSS
background-image
lets you use a portion of a larger image as a background.
-moz-image-rect(<uri>, top, right, bottom, left);
<url>
The URI of the image from which to take the sub-image.
top
<integer>
or
<percentage>
, of the sub-image within the specified image.
right
<integer>
or
<percentage>
, of the sub-image within the specified image.
bottom
<integer>
or
<percentage>
, of the sub-image within the specified image.
left
<integer>
or
<percentage>
, of the sub-image within the specified image.
This property 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.
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.
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;
}
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.
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.
Not part of any standard.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
-moz-image-rect()
Experimental
非标
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 4 | 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 |
完整支持
不支持
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
见实现注意事项。