opacity()
åºçº¿
广æ³å¯ç¨
èª 2016å¹´9æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
The opacity() CSS 彿°å¨è¾å
¥çå¾çå®ä¾ä¸åºç¨éæåº¦å±æ§ï¼å®çç»ææ¯ä¸ä¸ª <filter-function>.
å°è¯ä¸ä¸
filter: opacity(1);
filter: opacity(80%);
filter: opacity(50%);
filter: opacity(0.2);
filter: opacity(0);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
夿³¨ï¼è¿ä¸ªå½æ°ä¸å
¶ä»æ¢æçopacity屿§ç±»ä¼¼ï¼åºå«å¨äºæäº filtersï¼æäºæµè§å¨ä¼æä¾ç¡¬ä»¶å é以è·åæ´å¥½çæ§è½è¡¨ç°ã
è¯æ³
opacity(amount)
åæ°
amount-
转åçæ°å¼ï¼è¦æ±æ¯ä¸ä¸ª
<number>æä¸ä¸ª<percentage>ï¼ç¾åæ¯ï¼ãå¼ä¸º0%æ¯å®å ¨éæçï¼å¼ä¸º 100% ä¼ä¿çåæ¥çææãå¼å¨ 0% ä¸ 100% ä¹é´ææä¸ºçº¿æ§ååçï¼åæ°çæå°å·®å¼ä¸º 1ã
Examples
css
opacity(0%) /* å®å
¨éæ*/
opacity(50%) /* 50% éæ */
opacity(1) /* æ ææ */
See also
<filter-function>- CSS
opacityproperty