-moz-image-rect

非标准：此功能是非标准的，并且不在标准轨道上。请勿在面向 Web 的生产站点上使用它：它不适用于所有用户。实现之间也可能存在很大的不兼容性，并且行为将来可能会发生变化。

已弃用：不再推荐此功能。尽管某些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用它，并在可能的情况下更新现有代码；请参阅此页面底部的兼容性表以指导您的决策。请注意，此功能随时可能停止工作。

用于 CSS background-image 的-moz-image-rect 值允许您将较大图像的一部分用作背景。

语法

css

-moz-image-rect(url(), top, right, bottom, left);

值

url(): 要从中获取子图像的图像的 URI。
top: 顶部边缘，指定为<integer> 或<percentage>，表示子图像在指定图像中的位置。
right: 右侧边缘，指定为<integer> 或<percentage>，表示子图像在指定图像中的位置。
bottom: 底部边缘，指定为<integer> 或<percentage>，表示子图像在指定图像中的位置。
left: 左侧边缘，指定为<integer> 或<percentage>，表示子图像在指定图像中的位置。

描述

例如，此属性允许您将一个较大的图像的不同部分用作内容不同部分的背景。

这与-moz-image-region 属性的工作原理非常相似，该属性与list-style-image 属性一起使用，将图像的一部分用作列表中的项目符号。但是，这可以用于任何 CSS 背景。

矩形的语法类似于生成<shape> CSS 类型的rect() 函数。所有四个值都相对于图像的左上角。

示例

此示例加载一个图像，并将其分成四个部分以在四个<div> 块中绘制 Firefox 徽标。单击其容器会导致这四个部分通过在四个<div> 块之间交换background-image 属性值来旋转。

CSS

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

然后定义构成图像片段的四个框。让我们逐一查看它们。

css

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

这是图像的左上角。它定义了一个矩形，其中包含文件 firefox.jpg 中图像的左上角四分之一。

css

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

这定义了图像的右上角。

其他角遵循类似的模式

css

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

HTML

HTML 非常简单

html

<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>

这将我们的图像的四个片段放置在一个 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;
  }
}

这使用 window.getComputedStyle() 获取每个元素的样式，并将其移到下一个元素。请注意，在开始执行此操作之前，它会保存最后一个框的样式的副本，因为该样式将被第三个元素的样式覆盖。通过在每次鼠标点击时将 background-image 属性的值从一个元素复制到下一个元素，我们实现了所需的效果。

-moz-image-rect

语法

值

描述

示例

CSS

HTML

JavaScript 代码

外观

规范

浏览器兼容性

另请参阅