Nio 的個人網站

Firefox 有個 CSS 屬性： -moz-element()

可以用來將頁面上的指定元素形成即時縮圖。

具體作法如下：

1. 在頁面上製作一個用來顯示的縮圖的區域
   ---- html ----
   <div class="canvas"></div>
    
2. 指定剛剛的元素背景使用 -moz-element
   ---- CSS ----
    

background: white -moz-element(#bg) no-repeat scroll center center / contain;

width: 300px;

height: 200px;

position: fixed;

top: 10px;

right: 10px;

z-index: 99;

border: 1px solid #999;

當頁面上的內容有變動時，縮圖內容也會隨時更新。這個功能很適合用在不需要儲存的即時縮圖場景。

目前還只是 Firefox 專屬屬性，未來會不會納為 W3C標準還不好說。

效果如右上角，僅限 Firefox 瀏覽器可看到即時縮圖

注意！用來顯示的元素不能放在被顯示的元素中，否則會產生無限鏡像效果導致無法顯示。以上面範例來說就是 .canvas 不能放在#bg 內。