mask-image
åºçº¿
2023
æè¿å¯ç¨
èª December 2023 èµ·ï¼æ¤ç¹æ§å·²å¨ææ°æµè§å¨ä¸å¾å°æ¯æãä½å¨è¾æ§ç设å¤ææµè§å¨ä¸å¯è½æ æ³è¿è¡ã
mask-image CSS å±æ§è®¾ç½®äºç¨ä½å
ç´ èçå±çå¾åãé»è®¤æ
åµä¸ï¼è¿æå³çèçå¾åç alpha ééå°ä¸å
ç´ ç alpha ééç¸ä¹ãå¯ä»¥ä½¿ç¨ mask-mode å±æ§å¯¹æ¤è¿è¡æ§å¶ã
css
/* å
³é®åå¼ */
mask-image: none;
/* <mask-source> å¼ */
mask-image: url(masks.svg#mask1);
/* <image> å¼ */
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
mask-image: image(url(mask.png), skyblue);
/* å¤ä¸ªå±æ§å¼ */
mask-image:
image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1), transparent);
/* å
¨å±å±æ§å¼ */
mask-image: inherit;
mask-image: initial;
mask-image: revert;
mask-image: revert-layer;
mask-image: unset;
è¯æ³
å¼
none-
é»è®¤å¼ï¼éæçé»è²å¾åå±ï¼ä¹å°±æ¯æ²¡æé®ç½©å±ã
<mask-source><image>-
ç¨ä½èçå¾åå±çå¾åå¼ã
å½¢å¼å®ä¹
| åå§å¼ | none |
|---|---|
| éç¨å ç´ | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
| æ¯å¦æ¯ç»§æ¿å±æ§ | å¦ |
| 计ç®å¼ | as specified, but with <url> values made absolute |
| å¨ç»ç±»å | 离æ£å¼ |
å½¢å¼è¯æ³
mask-image =
<mask-reference>#
<mask-reference> =
none |
<image> |
<mask-source>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<mask-source> =
<url>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
示ä¾
ä½¿ç¨ URL 设置èçå¾å
è§è
| è§è |
|---|
| CSS Masking Module Level 1 # the-mask-image |