使用css的-moz-element()把html元素當背景圖片去

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>

實例效果（注意：請用火狐瀏覽器查看，纔能有效果）

 

俺妞妞

 

效果圖：