Last week, I designed an icon using two separate overlapping SVG icons (a flask with a line through it). This was to represent whether to show or hide assays (on a graph of assays and key event relations), and I wanted to fade out the icon if assays were hidden. I tried this using
color: rgba(255, 255, 255, 0.5) for both icons. This didn’t work:
The overlapped area is lighter as the icons combine.
To fix this and have the entire construct have the same color, you can use
opacity. I found this hard to search for, but I can’t see a way to get better at this other than learning basic CSS keywords as I’ve learnt the standard libraries of other languages.