元件 | element (Image Values) - CSS 中文开发手册
这是一种实验技术
由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。还要注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
element() 定义了一个<image>从任意HTML元件产生的值。此图像是实时的，这意味着如果HTML元素发生更改，则使用结果值的CSS属性将自动更新。
一个特别有用的使用场景是在HTML中呈现一个图像。<canvas>元素，然后使用该元素作为背景。
在Gecko浏览器上，您可以使用非标准的document.mozSetImageElement()方法更改用作给定CSS背景元素的背景的元素。
句法
element( id )
其中：
id要用作背景的元素的ID，使用HTML属性#指定ID在元素上。
实例
这些例子可以是现场观看在Firefox的构建中支持-moz-element()...
一个有点现实的例子
此示例使用隐藏的<div>作为背景。背景元素使用渐变，但也包括作为背景一部分呈现的文本。
<div style="400px; height:400px; background:-moz-element(#myBackground1) no-repeat;"> <p>This box uses the element with the #myBackground1 ID as its background!</p> </div> <div style="overflow:hidden; height:0;"> <div id="myBackground1" style="1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p> </div> </div>
ID为“myBackground1” 的<div>元素被用作内容的背景，包括段落“这个盒子以＃myBackground1 ID作为背景！”。
一个更奇怪的例子
本示例使用<button>重复模式中的隐藏元素作为背景。这表明，您可以使用任意元素作为背景，但不一定表现出良好的设计实践。
<div style="400px; height:100px; background:-moz-element(#myBackground2);"> </div> <div style="overflow:hidden; height:0;"> <button id="myBackground2" type="button">Evil button!</button> </div>
规格
|
Specification |
Status |
Comment |
|---|---|---|
|
CSS Image Values and Replaced Content Module Level 4The definition of 'Using Elements as Images: the element() notation' in that specification. |
Working Draft |
Actually now deferred to CSS4. |
浏览器兼容性
|
Feature |
Firefox (Gecko) |
Chrome |
Internet Explorer |
Opera |
Safari |
|---|---|---|---|---|---|
|
Basic support |
4.0 (2.0) * -moz |
No support |
No support |
No support |
No support |
|
Feature |
Firefox Mobile (Gecko) |
Android |
IE Phone |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|
|
Basic support |
4.0 (2.0) * -moz |
No support |
No support |
No support |
No support |
* Usage limited to the background and background-image CSS properties.
CSS 中文开发手册