element()
æéå¯ç¨
æ¤ç¹æ§ä¸å±äºåºçº¿ï¼å 为å®å°æªå¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æã
Want more browser support for this feature? Tell us why.
å®éªæ§: è¿æ¯ä¸é¡¹å®éªæ§ææ¯
å¨å°å
¶ç¨äºç产ä¹åï¼è¯·ä»ç»æ£æ¥æµè§å¨å
¼å®¹æ§è¡¨æ ¼ã
CSS 彿° element() å®ä¹äºä¸ä¸ªä»ä»»æç HTML å
ç´ ä¸çæçå¾å <image> å¼ã该å¾å弿¯å®æ¶çï¼è¿æå³çå¦æè¢«æå®ç HTML å
ç´ è¢«æ´æ¹ï¼å使ç¨ç»æå¼ç CSS 屿§ä¼èªå¨æ´æ°ã
ä¸ä¸ªç¹å«å®ç¨çåºç¨åºæ¯æ¯ï¼å¨æä¸ª HTML <canvas> å
ç´ ä¸æ¸²æå¾åï¼ç¶åå°å
¶ç¨ä½èæ¯ã
å¨ä½¿ç¨ Gecko 渲æå¼æçæµè§å¨ä¸ï¼å¯ä»¥ä½¿ç¨éæ åç document.mozSetImageElement() æ¹æ³ï¼å°æä¸ªå
ç´ æå®ä¸ºå
¶ä»å
ç´ çèæ¯å¾åã
è¯æ³
element(id)
å ¶ä¸ï¼
- id
-
ç¨ä½èæ¯çå ç´ ç IDï¼ä½¿ç¨å ç´ ç HTML 屿§ #id æå®ã
示ä¾
è¿äºç¤ºä¾å¨æ¯æ -moz-element() ç Firefox 䏿æã
ä¸ä¸ªæ¯è¾ç°å®çä¾å
è¿ä¸ªä¾åå°ææ¡£ä¸ä¸ä¸ªéèç <div> å
ç´ ä½ä¸ºèæ¯ãèæ¯å
ç´ ä½¿ç¨äºæ¸åï¼ä½å
¶ä¸ä¹å
å«ä½ä¸ºèæ¯ä¸é¨å渲æçææ¬ã
<div id="target-box">
<p>è¿ä¸ªçåä½¿ç¨ ID 为 #my-background çå
ç´ ä½ä¸ºå
¶èæ¯ï¼</p>
</div>
<div id="background-container">
<div id="my-background">
<p>è¿æ®µæåæ¯èæ¯çä¸é¨åãå¾é
·å§ï¼</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;
}
ID 为âmy-backgroundâç <div> å
ç´ è¢«å
嫿®µè½âè¿ä¸ªçåä½¿ç¨ ID 为 #my-background çå
ç´ ä½ä¸ºå
¶èæ¯ï¼âçå
容ç¨ä½èæ¯ã
页é¢é¢è§
è¿ä¸ªåºäº Vincent De Oliveira ç示ä¾å¨ <div id="css-result"> ä¹ä¸åå»ºäº <div id="css-source"> çé¢è§ã
HTML
<div id="css-source">
<h1>页é¢é¢è§</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 > |