問題描述

下面是帶有圓圈的傳單 (http://leafletjs.com/) 地圖的屏幕截圖.

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

圓圈的不透明度為 0.5，您可以清楚地看到它們重疊的位置.是否可以添加樣式規則以使重疊不具有更高的不透明度?傳單似乎不支持這一點，但我想知道 css 是否可以做到這一點?

The opacity of the circle is 0.5 and you can clearly see where they overlap. Is it possible to add a style rule such that the overlap doesn't have a higher opacity? It doesn't seem like leaflet has support for this but I wonder if such a thing is possible with css maybe?

我希望能夠顯示紅色圓圈的上方(即顯示其下方的內容)并具有同質的顏色.將不透明度分配給一個是不可行的.

I like to be able to show what the red circle is over (ie, show what is beneath it) and have a homogenous colour. Assigning the opacity to one is not feasible.

推薦答案

AFAIK 在 CSS 中沒有辦法防止半透明形狀的重疊區域相互添加"顏色，無論好壞是預期的行為(現實生活中這種形狀也會發生這種情況).

AFAIK there is no way in CSS to prevent the overlapping areas of semi-transparent shapes from having their colours "added" to each other, for better or worse this is expected behavior (it's what would happen with such shapes in real life too).

不幸的是，這對您沒有太大幫助，但是有一種可能的解決方法.如果您可以將這些形狀放入一個公共父元素中，則可以將 opacity:0.5; 應用于該元素.

Unfortunately that doesn't help you very much, however there is a possible work-around. If you can put these shapes into a common parent element you can apply opacity:0.5; to that instead.

簡單的例子:

<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 及其所有子項的 opacity 為 0.5.然后圓圈可以只是純色，這意味著它們顯示為均勻的半透明區域.

That will make .wrapper and all of it's children have an opacity of 0.5. The circles can then just be a solid colour, which will mean they display as a homogeneous semi-transparent zone.

我自己沒有使用過leaflet.js，所以我不確定在你的情況下這是否是一個可行的解決方案，但這是我會嘗試的.

I have not used leaflet.js myself, so I don't know for certain if this is a workable solution in your situation, but it's what I would try.

這篇關于傳單重疊形狀不透明度的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！