Opacity of sheet shapes

Question

Below is a screenshot of the flyer ( http://leafletjs.com/ ) with circles in them.

The transparency of the circle is 0.5, and you can clearly see where they intersect. Is it possible to add a style rule so that the overlap does not have more opacity? The leaflet seems to have no support, but I wonder if this is possible with css?

I like to show how the red circle ends (i.e. to show what is below it), and have a uniform color. Assigning opacity to one is not possible.

Answer 1

AFAIK in CSS, there is no way to prevent overlapping areas of translucent shapes from “adding” their colors to each other, for better or worse this is the expected behavior (this is what will happen to such shapes in real life too).

Unfortunately, this does not help you much, but there is a possible work. If you can put these figures into a common parent element, you can use it instead of opacity:0.5; .

Trivial example:

 <div class="wrapper" style="opacity:0.5"> <div class="circle"></div><!-- opacity:1 --> <div class="circle"></div><!-- opacity:1 --> <div class="circle"></div><!-- opacity:1 --> </div> 

.wrapper will do .wrapper , and all of his children have an opacity of 0.5 . Then the circles can be solid, which means that they are displayed as a homogeneous translucent zone.

I myself have not used the sheetlet.js file, so I don’t know for sure if this is the right solution in your situation, but this is what I will try.