flood-opacity

Baseline åºãå©ç¨å¯è½

ã¡ã¢: ãã¬ã¼ã³ãã¼ã·ã§ã³å±æ§ã§ãããããflood-opacity ã«ã¯å¯¾å¿ãã CSS ããããã£ã® flood-opacity ãããã¾ããä¸¡æ¹ãæå®ãããå ´åã CSS ããããã£ã®æ¹ãåªåããã¾ãã

ãã®å±æ§ã¯æ¬¡ã® SVG è¦ç´ ã§ä½¿ç¨ã§ãã¾ãã

<feFlood> ããã³ <feDropShadow>

ä¾

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="flood1">
    <feFlood
      flood-color="seagreen"
      flood-opacity="1"
      x="0"
      y="0"
      width="200"
      height="200" />
  </filter>
  <filter id="flood2">
    <feFlood
      flood-color="seagreen"
      flood-opacity="0.3"
      x="0"
      y="0"
      width="200"
      height="200" />
  </filter>

  <rect x="0" y="0" width="200" height="200" filter="url(#flood1)" />
  <rect x="220" y="0" width="200" height="200" filter="url(#flood2)" />
</svg>

ä½¿ç¨ä¸ã®ã¡ã¢

å¤	`<alpha-value>`
åæå¤	`1`
ã¢ãã¡ã¼ã·ã§ã³	å¯

<alpha-value>: ç¾å¨ã®ãã£ã«ã¿ã¼ããªããã£ãã®ãµãé åå¨ä½ã«ä½¿ç¨ããä¸ééåº¦ã®å¤ãç¤ºãæ°å¤ã¾ãã¯ãã¼ã»ã³ãå¤ã§ãã æ°å¤ã® 0 ã¾ãã¯ãã¼ã»ã³ãå¤ã® 0% ã¯å®å¨ã«éæãªè²ãè¡¨ãã1 ã¾ãã¯ 100% ã¯å®å¨ã«ä¸éæãªè²ãè¡¨ãã¾ãã