使用css的-moz-element()把html元素當背景圖片去
阿新 • • 發佈:2019-01-07
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>例項效果(注意:請用火狐瀏覽器檢視,才能有效果)
效果圖: