元件 | element

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.