-moz-image-rect

非标准

此功能是非标准的，不处于标准轨道上.。不要在面向Web的生产站点上使用它：它并不适用于每个用户。实现之间也可能存在很大的不兼容性，而且这种行为在未来可能会发生变化。

CSSbackground-image的-moz-image-rect值使您可以使用较大图像的一部分作为背景。这使得您可以将一个较大的图像的不同部分用作内容不同部分的背景。

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

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

语法

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

值

<uri>从中获取子图像的URI。top顶部边缘，指定为<length>，用于指定图像中的子图像。right右侧边缘，指定为<length>，用于指定图像中的子图像。bottom底部边缘，指定为<length>，用于指定图像中的子图像。left左边边缘，指定为<length>，用于指定图像中的子图像。

示例

此示例表示加载一个图像，并在四个<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(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
  width:133px;
  height:136px;
  position:absolute;
}

这是图像的左上角.。它定义了一个矩形，且该矩形包含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;
}

这定义了图像的右上角.

其他角也遵循类似的模式：

#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

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>

这把我们的图像的四个部分放在一个二乘二的方格中。这四个部分都包含在一个更大的<div>块里，其主要目的是接收单击事件并将它们分派到我们的JavaScript代码中。

JavaScript代码

当容器收到鼠标单击时，此代码处理单击事件。

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

用window.getComputedStyle()获取每个元素的样式，并将其移动到以下元素。请注意，在开始这样做之前，它会保存最后一个框的样式的副本，这是因为它将被第三个元素的样式覆盖。通过简单地将background-image属性的值从一个元素复制到下一个，每次点击鼠标，我们就达到了预期的效果。

它看起来像什么

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18