CSS-функция `-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>).

Описание

Это свойство позволяет, например, использовать разные части одного большого изображения в качестве фонов в разных частях содержимого.

Синтаксис прямоугольника похож на синтаксис функции rect(), создающей тип CSS <shape>. Все четыре значения отсчитываются от верхнего левого угла изображения.

Примеры

В этом примере загружается изображение, которое разделяется на четыре части для создания логотипа Firefox в четырёх блоках <div>. При нажатии на контейнер четыре части поворачиваются: значения свойства background-image меняются местами между четырьмя блоками <div>.

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>

Так четыре фрагмента изображения размещаются в сетке из двух строк и двух столбцов. Все четыре фрагмента находятся внутри большего блока <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 копируются из одного элемента в следующий, что и позволяет получить нужный эффект.

Результат

Спецификации

Не входит ни в один стандарт.

Совместимость с браузерами

См. также

• Расширения CSS от Mozilla
• Модуль CSS «Фоны и границы»