元件 | element
这是一种实验技术
由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。还要注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
element() 定义了一个<image>从任意HTML元件产生的值。此图像是实时的，这意味着如果HTML元素发生更改，则使用结果值的CSS属性将自动更新。
一个特别有用的使用场景是在HTML中呈现一个图像。<canvas>元素，然后使用该元素作为背景。
在Gecko浏览器上，您可以使用非标准的document.mozSetImageElement()方法更改用作给定CSS背景元素的背景的元素。
句法
element( id )其中：
id要用作背景的元素的ID，使用HTML属性#指定ID在元素上。
实例
这些例子可以是现场观看在Firefox的构建中支持-moz-element()...
一个有点现实的例子
此示例使用隐藏的<div>作为背景。背景元素使用渐变，但也包括作为背景一部分呈现的文本。
<div style="width: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="width: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="width: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.
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
