element

翻译不完整。 请帮助我们翻译这篇文章!

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

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

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

语法

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> 元素作为背景。被隐藏的元素本身使用了渐变背景,也包含了一些文字,渐变背景和文字都成为了第一个元素的背景。

<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>

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!".

example1.png

一个有点怪怪的例子

This example uses a hidden <button> element in a repeating pattern as its background. This demonstrates that you can use arbitrary elements as background, but doesn't necessarily demonstrate good design practices.

<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>

example2.png

规范

规范 状态 备注
CSS Images Module Level 4
Using Elements as Images: the element() notation
Working Draft Deferred from CSS3 Images.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
element()
Experimental
Chrome No support NoEdge No support NoFirefox Full support 57
Prefixed
Full support 57
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
No support 29 — 57
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes -moz-element() is limited to background-image, background, border-image and border-image-source.
No support 4 — 29
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes -moz-element() is limited to background-image and background.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 60
Prefixed
Full support 60
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
No support 29 — 60
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes -moz-element() is limited to background-image, background, border-image and border-image-source.
No support 4 — 29
Prefixed Notes
Prefixed Implemented with the vendor prefix: -moz-
Notes -moz-element() is limited to background-image and background.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见