-moz-image-rect

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

-moz-image-rectCSSbackground-image に対する値で、大きな画像の一部を背景として使用することができます。

構文

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

<url()>

部分画像を取得する画像の URI です。

top

指定された画像内の部分画像の上端の辺を、 <integer> または <percentage> で指定します。

指定された画像内の部分画像の右端の辺を、 <integer> または <percentage> で指定します。

bottom

指定された画像内の部分画像の下端の辺を、 <integer> または <percentage> で指定します。

left

指定された画像内の部分画像の左端の辺を、 <integer> または <percentage> で指定します。

解説

このプロパティを使用すると、例えば、1 つの大きな画像の異なる部分を、コンテンツの異なる部分の背景として使用することができます。

これは、-moz-image-region プロパティとよく似た働きをします。このプロパティは、list-style-image プロパティと一緒に使用され、画像の一部をリストの箇条書きとして使用します。ただし、これはどのような CSS 背景にも使用できます。

長方形の構文は、<shape> を生成する rect() 関数に似ています。CSS タイプを生成する関数です。4 つの値はすべて、画像の左上隅に対する相対値です。

この例では、画像をロードし、それを 4 分割して 4 つの <div> ブロックに Firefox ロゴを描画しています。コンテナーをクリックすると、4 つの background-image プロパティの値が 4 つの <div> ブロック間で入れ替わることで、4 つの区域が回転します。

CSS

CSS では、1 つのコンテナーのスタイルを定義した後、画像全体を構成する 4 つのボックスのスタイルを定義しています。

コンテナーは次のようになります。

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

次に、画像の区域を定義する 4 つのボックスを定義します。1 つずつ見ていきましょう。

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

これは画像の左上隅です。ファイル firefox.jpg に含まれる画像の左上 1/4 を含む長方形を定義します。

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>

これにより、画像の 4 つの区域が 2 × 2 のボックスグリッドに配置されます。これらの 4 つの区域は、大きな <div> ブロックの中に含まれており、クリックイベントを受信して JavaScript コードに配信することを主な目的としています。

JavaScript コード

このコードは、コンテナーがマウスでクリックされたときのクリックイベントを処理します。

js
function rotate() {
  var prevStyle = window
    .getComputedStyle(document.getElementById("box4"), null)
    .getPropertyValue("background-image");

  // 最後の 1 枚を保存したところで、回転を開始します。

  for (var i = 1; i <= 4; i++) {
    var curId = "box" + i;

    // 背景画像のをずらす

    var curStyle = window
      .getComputedStyle(document.getElementById(curId), null)
      .getPropertyValue("background-image");
    document.getElementById(curId).style.backgroundImage = prevStyle;
    prevStyle = curStyle;
  }
}

これは window.getComputedStyle() を使って各要素のスタイルを取得し、それを次の要素にシフトしています。この処理を開始する前に、最後のボックスのスタイルのコピーを保存していることに注目してください。3 つ目の要素のスタイルによって上書きされるからです。background-image プロパティの値を、マウスをクリックするたびに 1 つの要素から次の要素にコピーすることで、目的の効果を得ることができます。

どのように見えるか

仕様書

どの標準にも含まれていません。

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
-moz-image-rect()
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.

関連情報