opacity
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2015å¹´7æ以éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
opacity å±æ§ã¯ããªãã¸ã§ã¯ãã¾ãã¯ãªãã¸ã§ã¯ã群ã®éé度ãããªãã¡è¦ç´ ã®èå¾ã«è¡¨ç¤ºãããèæ¯ãã©ãã ã表示ãããããæå®ãã¾ãã
ã¡ã¢:
ãã¬ã¼ã³ãã¼ã·ã§ã³å±æ§ã§ããããã opacity ã«ã¯å¯¾å¿ãã CSS ãããã㣠opacity ãããã¾ãã両æ¹ãæå®ãããå ´åã CSS ããããã£ã®æ¹ãåªå
ããã¾ãã
ãã®å±æ§ã¯ä»¥ä¸ã® SVG è¦ç´ ã§ä½¿ç¨ãããã¨ãã§ãã¾ãã
<a><circle><ellipse><foreignObject><g><image><line><marker><path><polygon><polyline><rect><svg><switch><symbol><text><textPath><tspan><use>
fill-opacity, stroke-opacity, stop-opacity ã¨ã¯ç°ãªããopacity ã¯åã
ã®æä½ã«é©ç¨ããããã®ã§ã¯ãªããè¦ç´ ãã¬ã³ããªã³ã°ãããéã«é©ç¨ããããã®ã§ã¯ããã¾ãããopacity ã¯ãªãã¸ã§ã¯ããã°ã«ã¼ãå
¨ä½ã«é©ç¨ããããªãã¸ã§ã¯ããã°ã«ã¼ãã®ã¬ã³ããªã³ã°æ¸ã¿ç»åã«å¯¾ããå¾å¦çæä½ã¨åæ§ã«æ§è³ªãæã¡ã¾ãããããã£ã¦ãåãé åã« opacity ã¨ä»ã®ä¸éæ度å±æ§ã両æ¹åå¨ããå ´åããããã¯äºãã«åæãããä¸éæ度ãä¹ç®ããã¾ãã
ä¾
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%">
<stop offset="0%" stop-color="skyblue" />
<stop offset="100%" stop-color="seagreen" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" />
<circle cx="50" cy="50" r="40" fill="black" />
<circle cx="150" cy="50" r="40" fill="black" opacity="0.3" />
</svg>
使ç¨ä¸ã®ã¡ã¢
| ããã©ã«ãå¤ | 1 |
|---|---|
| å¤ | <alpha-value> |
| ã¢ãã¡ã¼ã·ã§ã³ | å¯ |
<alpha-value>-
ãªãã¸ã§ã¯ãå ¨ä½ã«é©ç¨ãããåä¸ãªä¸éé度ã®è¨å®ã
<number>ã¨ãã¦æå®ãã¾ãã0.0ï¼å®å ¨ã«éæï¼ãã 1.0ï¼å®å ¨ã«ä¸éæï¼ã®ç¯å²å¤ã®å¤ã¯ããã®ç¯å²ã«åã¾ãããã«è£æ£ããã¾ãã
ä»æ§æ¸
| ä»æ§æ¸ |
|---|
| CSS Color Module Level 4 # propdef-opacity |
| Scalable Vector Graphics (SVG) 2 # ObjectAndGroupOpacityProperties |
ãã©ã¦ã¶ã¼ã®äºææ§
é¢é£æ å ±
- CSS ã®
opacityãããã㣠fill-opacitystop-opacitystroke-opacity