grayscale()
åºçº¿
广æ³å¯ç¨
èª 2016å¹´9æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
grayscale() : 对å¾çè¿è¡ç°åº¦è½¬æ¢ï¼å®æ¯ <filter-function> çå屿§ã
å°è¯ä¸ä¸
filter: grayscale(0);
filter: grayscale(0.2);
filter: grayscale(60%);
filter: grayscale(1);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
è¯æ³
grayscale(amount)
åæ°
amount-
转æ¢å¼ç大å°ï¼å¯ä»¥æ¯
<number>æ<percentage>. å½å¼ä¸º 100% æ¶ï¼ç°åº¦æå¤§ã0% æ¶ä¸å徿²¡æåºå«ã0% å° 100% ä¹é´çå¼ä¼ä½¿ç°åº¦çº¿æ§ååãamount 为空æ¶ä½¿ç¨å¼ä¸º1.
ä¾å
css
grayscale(0) /* æ ææ */
grayscale(.7) /* 70% ç°åº¦ */
grayscale(100%) /* ç°åº¦æå¤§ */