element()

实验性： 这是一个 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表。

element() CSS 函数 定义了从任意 HTML 元素生成的 <image> 值。此图像是实时的，这意味着如果 HTML 元素发生更改，使用结果值的 CSS 属性会自动更新。

使用它的一个特别有用的场景是，在 HTML <canvas> 元素中渲染图像，然后将其用作背景。

在 Gecko 浏览器上，可以使用非标准的 document.mozSetImageElement() 方法更改用作给定 CSS 背景元素背景的元素。

语法

css
element(id)

其中

id

要使用作背景的元素的 ID，在元素上使用 HTML 属性 #id 指定。

示例

这些示例适用于支持 -moz-element() 的 Firefox 版本。

一个比较现实的示例

此示例使用隐藏的 <div> 作为背景。背景元素使用渐变，但也包含作为背景的一部分渲染的文本。

html
<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; rotate: 45deg; color:white;">
      This text is part of the background. Cool, huh?
    </p>
  </div>
</div>

具有 ID "myBackground1" 的 <div> 元素用作包含段落 "This box uses the element with the #myBackground1 ID as its background!" 的内容的背景。

页面预览

此 基于 Vincent De Oliveira 的示例 在 <div id="css-result"> 内创建 <div id="css-source"> 的预览。

HTML

html
<div id="css-source">
  <h1>Page Preview</h1>
</div>
<div id="css-result"></div>

CSS

css
#css-result {
  background: -moz-element(#css-source) no-repeat;
  width: 256px;
  height: 32px;
  background-size: 80%;
  border: dashed;
}

结果

规范

规范
CSS 图像模块级别 4
# element-notation

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅