element

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

实验性: 这是一项实验性技术
在将其用于生产之前,请仔细检查浏览器兼容性表格

CSS 函数 element() 定义了一个从任意的 HTML 元素中生成的图像 <image> 值。该图像值是实时的,这意味着如果被指定的 HTML 元素被更改,the CSS properties using the resulting value are automatically updated.

一个特别实用的应用场景是,在某个 HTML <canvas> 元素中渲染图像,然后将其用作背景。

在使用 Gecko 渲染引擎的浏览器中,可以使用非标准的 document.mozSetImageElement() 方法,将某个元素指定为其他元素的背景图像。

语法

css
element(id)

其中:

id

The ID of an element to use as the background, specified using the HTML attribute #id on the element.

示例

在支持 -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>

The <div> element with the ID "myBackground1" is used as the background for the content including the paragraph "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;
}

结果

规范

Specification
CSS Images Module Level 4
# element-notation

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
element()
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见