-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>。
描述
例如，此屬性允許您使用一個較大影像的不同部分作為內容中不同部分的背景。
示例
此示例載入一個影像，並將其分成四個片段，在四個 <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("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>
這會將影像的四個片段放置在 2x2 的盒子網格中。這四個片段都包含在一個較大的 <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 屬性的值從一個元素複製到下一個元素，我們實現了所需的效果。
它看起來像什麼
規範
不屬於任何標準。
瀏覽器相容性
載入中…