元件 | element (Image Values) – CSS 中文开发手册

??CSS 中文开发手册

元件 | 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="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>

规格

浏览器兼容性

* Usage limited to the background and background-image CSS properties.

??CSS 中文开发手册