-moz-image-rect

Не стандартизовано: Це — нестандартний функціонал, і стандартизувати його ніхто не планує. Його не слід використовувати на вебсайтах у відкритому вебі, оскільки він не буде працювати для всіх користувачів. Також можливі суттєві (і часто — несумісні) відмінності між реалізаціями, а поведінка може змінитися у майбутньому.

Застаріло: Це — не рекомендована до використання функціональність. Хоча деякі браузери все ще можуть її підтримувати, її або вже виключено з актуальних вебстандартів, або вона знаходиться в процесі завершення підтримки, або ж її залишили лише з міркувань зворотної сумісності. Слід уникати її використання, і якщо можливо — оновлювати вже написаний з код, що опирається на цю функціональність (дивіться таблицю сумісності) внизу цієї сторінки, щоб прийняти рішення). Майте на увазі: ця функціональність може припинити працювати в будь-який момент.

Властивість CSS -moz-image-rect (Mozilla – прямокутник зображення) для background-image дає змогу використовувати частину більшого зображення як тло.

Синтаксис

-moz-image-rect(<a href="/uk/docs/Web/CSS/url"><code>url()</code></a>, top, right, bottom, left);

Значення

url()

URI зображення, з якої потрібно отримати підзображення.

top

Верхній край підзображення, заданий як <integer> або <percentage>, у межах вказаного зображення.

Правий край підзображення, заданий як <integer> або <percentage>, у межах вказаного зображення.

bottom

Нижній край підзображення, заданий як <integer> або <percentage>, у межах вказаного зображення.

left

Лівий край підзображення, заданий як <integer> або <percentage>, у межах вказаного зображення.

Опис

Ця властивість дає змогу, наприклад, використовувати різні частини одного великого зображення як тло у різних частинах вмісту.

Це працює вельми подібно до властивості -moz-image-region, котра використовується вкупі із властивістю list-style-image для використання частин зображення замість маркерів у списках. Втім, властивість -moz-image-rect може використовуватись для встановлення будь-якого CSS-тла.

Синтаксис прямокутника подібний до функції 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;
  position: absolute;
}

Код вище — верхній лівий кут зображення. Він описує прямокутник, що містить верхню ліву чверть зображення з файлу firefox.jpg.

#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 id="container" onclick="rotate()">
  <div id="box1" style="left:0px;top:0px;">Верхній лівий</div>
  <div id="box2" style="left:133px;top:0px;">Верхній правий</div>
  <div id="box3" style="left:0px;top:136px;">Нижній лівий</div>
  <div id="box4" style="left:133px;top:136px;">Нижній правий</div>
</div>

Такий код розміщує чотири сегменти зображення у сітці два на два. Ці сегменти вкупі розташовані всередині більшого <div> блоку, чиє основне призначення — отримувати події кліку та направляти їх до JavaScript коду.

Код на JavaScript

Цей код обробляє подію кліку, коли контейнер отримує клік миші.

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

  // Тепер, оскільки збережене останнє значення, починається чергування
  for (let i = 1; i <= 4; i++) {
    const curId = `box${i}`;

    // Зсування зображень тла
    const curStyle = window
      .getComputedStyle(document.getElementById(curId), null)
      .getPropertyValue("background-image");
  }
}

Тут використовується window.getComputedStyle() для отримання стилю кожного елементу, зсуваючи його до наступного елементу. Зверніть увагу, що до початку чергування зберігається копія стилю останнього блоку, оскільки він буде перезаписаний стилем третього елементу. Копіюючи значення властивості background-image від першого елементу до наступного з кожним кліком миші, досягається бажаний ефект.

На що це схоже

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

Не є частиною жодного стандарту.

Сумісність з браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
-moz-image-rect()
Experimental Non-standard
Chrome No support No
Edge No support No
Firefox Full support 4
Internet Explorer No support No
Opera No support No
Safari No support No
footnote
WebView Android No support No
Chrome Android No support No
Firefox for Android Full support 4
Opera Android No support No
Safari on iOS No support No
footnote
Samsung Internet No support No

Дивіться також