sepia()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2016å¹´9æâ©.
sepia() 㯠CSS ã®é¢æ°ã§ãå
¥åç»åãã»ãã¢è²ã«ãããæãããããé»è²/è¶è²ããã£ãã®è¡¨ç¾ã«å¤æãã¾ããçµæ㯠<filter-function> ã§ãã
試ãã¦ã¿ã¾ããã
filter: sepia(0);
filter: sepia(0.2);
filter: sepia(60%);
filter: sepia(1);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
æ§æ
sepia(amount)
å¼æ°
amount-
å¤æã®åº¦åãã§ã
<number>ã¾ãã¯<percentage>ã§æå®ãã¾ãã100%ã®å¤ã§ã¯å®å ¨ã«ã»ãã¢è²ã«ãªãã0%ã®å¤ã§ã¯å ¥åãå¤æ´ãããªãã¾ã¾ã«ãªãã¾ãã0%ã¨100%ã®éã®å¤ã¯ãå¹æã®å²åã§ããè£éã®åæå¤ã¯0ã§ãã
ä¾
sepia() ã®æ£ããå¤ã®ä¾
sepia(0) /* å¹æãªã */
sepia(.65) /* 65% ã»ãã¢è² */
sepia(100%) /* å®å
¨ã«ã»ãã¢è² */
ä»æ§æ¸
| Specification |
|---|
| Filter Effects Module Level 1 # funcdef-filter-sepia |
ãã©ã¦ã¶ã¼ã®äºææ§
é¢é£æ å ±
ãã®ä»ã® filter ããã³ backdrop-filter ããããã£ã®å¤ã§ä½¿ç¨ã§ãã <filter-function> é¢æ°ã«ã¯ã次ã®ãã®ãããã¾ãã