background:-moz-element(id)定義了一個從任意HTML元件產生的值。此影象是實時的，這意味著如果更改了HTML元素，則會自動更新使用結果值的CSS屬性。element() <image>

使用它的一個特別有用的場景是在HTML 

<canvas>元素中渲染影象，然後將其用作背景。

在Gecko瀏覽器中，您可以使用非標準document.mozSetImageElement()方法更改用作給定CSS背景元素的背景的元素。

 

---

 

語法

1 background:-moz-element(id)

引數id

用作背景的元素的ID，使用元素上的HTML屬性

#id指定。

 

---

 

 

例項

這些示例可以在支援的Firefox版本中實時檢視-moz-element()。

一個簡單的例子

此示例使用隱藏<div>作為背景。background元素使用漸變，但也包括作為背景的一部分呈現的文字。

<div style="width:250px; height:250px; background:-moz-element(#murenziwei) no-repeat;">
  <p>

斑駁的夜色在說什麼 <br/>
誰能告訴我如何選擇 <br/>
每當我想起分離時刻 <br/>
 
</p>
</div>

<div style="overflow:hidden; height:0;">
  <div id="murenziwei" style="width:250px; height:250px; background-image: -webkit-radial-gradient(red,blue,green);">
  <p style="transform-origin:0px 150px; transform: rotate(45deg); color:white;">《悲傷就逆流成河》</p>
  </div>
</div>

 

<div>ID為“murenziwei” 的元素用作內容的背景，包括段落“此框使用帶有#murenziwei ID作為其背景的元素！”。

例項效果（注意：請用火狐瀏覽器檢視，才能有效果）

斑駁的夜色在說什麼
誰能告訴我如何選擇
每當我想起分離時刻

《悲傷就逆流成河》

 

效果圖：

 

 

引用按鈕button的例子

此示例使用<button>重複模式中的隱藏元素作為其背景。這表明您可以使用任意元素作為背景，但不一定表現出良好的設計實踐。

<div style="width:408px; height:100px; background:-moz-element(#murenziweiButton);">
</div>

<div style="overflow:hidden; height:0;">
  <button id="murenziweiButton" type="button" >俺妞妞</button>
</div>

例項效果（注意：請用火狐瀏覽器檢視，才能有效果）

  俺妞妞

 

效果圖：