-moz-image-rect
非标准：此特性未标准化。我们不建议在生产环境中使用非标准特性，因为它们浏览器支持有限，并且可能会更改或被移除。但是，在没有标准选项的特定情况下，它们可以是合适的替代方案。
已弃用：此特性不再推荐。虽然某些浏览器可能仍然支持它，但它可能已经从相关的网络标准中删除，可能正在删除过程中，或者可能仅为兼容性目的而保留。请避免使用它，如果可能，请更新现有代码；请参阅本页底部的兼容性表格以指导您的决策。请注意，此特性可能随时停止工作。
-moz-image-rect 值用于 CSS background-image，它允许你使用较大图像的一部分作为背景。
语法
-moz-image-rect(url("my-url"), top, right, bottom, left);
值
<url>-
要从中提取子图像的图像的 URI。
top-
子图像在指定图像中的上边缘，指定为
<integer>或<percentage>。 right-
子图像在指定图像中的右边缘，指定为
<integer>或<percentage>。 bottom-
子图像在指定图像中的下边缘，指定为
<integer>或<percentage>。 left-
子图像在指定图像中的左边缘，指定为
<integer>或<percentage>。
描述
例如，此属性允许您使用一个较大图像的不同部分作为内容中不同部分的背景。
示例
此示例加载一个图像，并将其分成四个片段，在四个 <div> 块中绘制 Firefox 标志。点击它们的容器会通过在四个 <div> 块之间交换 background-image 属性值，使这四个片段旋转。
CSS
CSS 定义了一个容器样式，然后是构成完整图像的四个盒子的样式。
容器看起来像这样
#container {
width: 267px;
height: 272px;
top: 100px;
left: 100px;
position: absolute;
font-size: 16px;
text-shadow: white 0px 0px 6px;
text-align: center;
}
然后定义构成图像片段的四个盒子。我们逐一查看它们。
#box1 {
background-image: -moz-image-rect(url("firefox.png"), 0%, 50%, 50%, 0%);
width: 133px;
height: 136px;
left: 0px;
top: 0px;
position: absolute;
}
这是图像的左上角。它定义了一个矩形，包含文件 firefox.jpg 中图像的左上四分之一部分。
#box2 {
background-image: -moz-image-rect(url("firefox.png"), 0%, 100%, 50%, 50%);
width: 133px;
height: 136px;
left: 133px;
top: 0px;
position: absolute;
}
这定义了图像的右上角。
其他角遵循类似的模式
#box3 {
background-image: -moz-image-rect(url("firefox.png"), 50%, 50%, 100%, 0%);
width: 133px;
height: 136px;
left: 0px;
top: 136px;
position: absolute;
}
#box4 {
background-image: -moz-image-rect(url("firefox.png"), 50%, 100%, 100%, 50%);
width: 133px;
height: 136px;
left: 133px;
top: 136px;
position: absolute;
}
HTML
我们包含一个带有四个盒子的容器
<div id="container">
<div id="box1">Top left</div>
<div id="box2">Top right</div>
<div id="box3">Bottom left</div>
<div id="box4">Bottom right</div>
</div>
这会将图像的四个片段放置在 2x2 的盒子网格中。这四个片段都包含在一个较大的 <div> 块中，该块的主要目的是接收点击事件并将其分派到我们的 JavaScript 代码。
JavaScript
当容器接收到鼠标点击时，此代码处理点击事件。
function rotate() {
let prevStyle = window
.getComputedStyle(document.getElementById("box4"), null)
.getPropertyValue("background-image");
// Now that we've saved the last one, start rotating
for (let i = 1; i <= 4; i++) {
const curId = `box${i}`;
// Shift the background images
const curStyle = window
.getComputedStyle(document.getElementById(curId), null)
.getPropertyValue("background-image");
document.getElementById(curId).style.backgroundImage = prevStyle;
prevStyle = curStyle;
}
}
document.getElementById("container").addEventListener("click", rotate);
这使用 window.getComputedStyle() 来获取每个元素的样式，并将其转移到下一个元素。请注意，在开始这样做之前，它会保存最后一个盒子的样式副本，因为它将被第三个元素的样式覆盖。通过在每次鼠标点击时将 background-image 属性的值从一个元素复制到下一个元素，我们实现了所需的效果。
它看起来像什么
规范
不属于任何标准。
浏览器兼容性
加载中…