このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
-moz-image-rect
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
-moz-image-rect はCSS のbackground-image に対する値で、大きな画像の一部を背景として使用することができます。
構文
-moz-image-rect(<url()>, top, right, bottom, left);値
<url()>部分画像を取得する画像の URI です。
top指定された画像内の部分画像の上端の辺を、
<integer>または<percentage>で指定します。right指定された画像内の部分画像の右端の辺を、
<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 つのボックスのスタイルを定義しています。
コンテナーは次のようになります。
#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 つずつ見ていきましょう。
#box1 { background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%); width: 133px; height: 136px; position: absolute;}これは画像の左上隅です。ファイルfirefox.jpg に含まれる画像の左上 1/4 を含む長方形を定義します。
#box2 { background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%); width: 133px; height: 136px; position: absolute;}これは、画像の右上隅を定義します。
他の隅も同様のパターンです。
#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 はとてもシンプルです。
<div> <div>Top left</div> <div>Top right</div> <div>Bottom left</div> <div>Bottom right</div></div>これにより、画像の 4 つの区域が 2 × 2 のボックスグリッドに配置されます。これらの 4 つの区域は、大きな<div> ブロックの中に含まれており、クリックイベントを受信して JavaScript コードに配信することを主な目的としています。
JavaScript コード
このコードは、コンテナーがマウスでクリックされたときのクリックイベントを処理します。
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 つの要素から次の要素にコピーすることで、目的の効果を得ることができます。
どのように見えるか
仕様書
どの標準にも含まれていません。