element()

Ограниченная доступность

Эта функция не входит в базовую версию, поскольку она не работает во всех широко используемых браузерах.

Экспериментальная: Это экспериментальная технология экспериментальная технология
Перед использованием в продуктивной среде внимательно ознакомьтесь со таблицей совместимости с браузерами.

Функция element() CSS функция определяет значение <image>, генерируемое из произвольного HTML-элемента. Это изображение динамичное, что означает, что при изменении HTML-элемента свойства CSS, использующие полученное значение, обновляются автоматически.

В частности, это полезно для отображения изображения в HTML-элементе <canvas>, а затем использования его в качестве фона.

В браузерах Gecko можно использовать нестандартный метод document.mozSetImageElement() для изменения элемента, используемого в качестве фона для данного элемента CSS фона.

Синтаксис

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

Элемент <div> с ID "myBackground1" используется как фон для содержимого, включая абзац "Этот блок использует элемент с ID #myBackground1 в качестве фона!".

Предварительный просмотр страницы

Этот пример, основанный на примере Винсента де Оливейры, создает предварительный просмотр <div id="css-source"> внутри <div id="css-result">.

HTML

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

CSS

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

Результат

Спецификации

Спецификация
CSS Images Module Level 4 # element-notation

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`element()`	Нет	Нет	57 29–57 `-moz-element()` ограничен до `background-image`, `background`, `border-image` и `border-image-source`. 4–29 `-moz-element()` ограничен до `background-image` и `background`.	Нет	Нет	Нет	60 29–60 `-moz-element()` ограничен до `background-image`, `background`, `border-image` и `border-image-source`. 4–29 `-moz-element()` ограничен до `background-image` и `background`.	Нет	Нет	Нет	Нет

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/element()