element()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Hàm element() CSS function định nghĩa giá trị <image> được tạo ra từ một phần tử HTML tùy ý. Hình ảnh này là trực tiếp (live), nghĩa là nếu phần tử HTML thay đổi, các thuộc tính CSS sử dụng giá trị kết quả sẽ được cập nhật tự động.
Một tình huống đặc biệt hữu ích cho việc sử dụng hàm này là kết xuất hình ảnh trong phần tử HTML <canvas>, sau đó sử dụng nó làm nền.
Trên các trình duyệt Gecko, bạn có thể dùng phương thức không chuẩn document.mozSetImageElement() để thay đổi phần tử được dùng làm nền cho một phần tử nền CSS nhất định.
Cú pháp
element(id)
trong đó:
- id
-
ID của phần tử dùng làm nền, được chỉ định bằng thuộc tính HTML #id trên phần tử đó.
Cú pháp chính thức
<element()> =
element( <id-selector> )
<id-selector> =
<hash-token>
Ví dụ
Các ví dụ này hoạt động trên các bản dựng của Firefox hỗ trợ -moz-element().
Một ví dụ khá thực tế
Ví dụ này sử dụng một <div> ẩn làm nền. Phần tử nền dùng gradient, nhưng cũng bao gồm văn bản được kết xuất như một phần của nền.
<div id="target-box">
<p>This box uses the element with the #my-background ID as its background!</p>
</div>
<div id="background-container">
<div id="my-background">
<p>This text is part of the background. Cool, huh?</p>
</div>
</div>
#target-box {
width: 400px;
height: 400px;
background: -moz-element(#my-background) no-repeat;
}
#background-container {
overflow: hidden;
height: 0;
}
#my-background {
width: 1024px;
height: 1024px;
background-image: linear-gradient(to right, red, orange, yellow, white);
}
#my-background p {
transform-origin: 0 0;
rotate: 45deg;
color: white;
}
Phần tử <div> với ID "my-background" được dùng làm nền cho nội dung bao gồm đoạn văn "This box uses the element with the #my-background ID as its background!".
Xem trước trang
Ví dụ này dựa trên bài của Vincent De Oliveira tạo ra bản xem trước của <div id="css-source"> bên trong <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;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Images Module Level 4 # element-notation |