鍍金池/ 問答/HTML/ 如何高亮顯示遮罩層上的多塊區(qū)域(div)

如何高亮顯示遮罩層上的多塊區(qū)域(div)

1) 想在遮罩層上突出某個div,想高亮顯示。

期待的效果是這樣的 圖片描述

  body {
  height: 100%;
  width: 100%;

}
/*   霧罩層 */
.mask {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: absolute;
  overflow: hidden;
  display: flex;
  height: 100%;
  width: 100%;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.circle {
  box-shadow: 0 0 0 1200px rgba(0, 0, 0, 0.5);
  justify-content: center;
  flex-direction: column;
  align-items: center;
  /*border-radius: 100%;*/
  display: flex;
  height: 150px;
  width: 150px;
  display: block;
  float:left;
}

* HTML部分

<div class="popup">
  <div class="circle"   id="s1"  style="position=absolute; left:400px; top:110px ; "  ></div> 
  <div class="circle"   id="s2"  style="position=absolute; margin-top: 20px;left:40px;  top:550px; "  ></div> 
</div>

如果只有一個div需要高亮，這個方法還行。見圖一。

只有一個div需要高亮

有多個div的話，效果很差。

有2個div需要高亮

有什么別的辦法嗎？

不加顏色的效果

回答
編輯回答
朽鹿

你到底想寫什么，你的boxshadow給那么大的值，兩個互相影響

2017年10月22日 11:25
編輯回答
孤影

如果是要完整的高亮某個元素的話，可以這樣。
其實就是提高高亮元素的層級，獲取其位置與大小，再加一個白色的浮層在它下面。
https://jsfiddle.net/p64bhse4/4/

2018年7月7日 20:10
編輯回答
半心人

用canvas css沒有太好的辦法,因為沒有取反區(qū)域.

2017年10月19日 16:22
編輯回答
玩控

看你的效果圖，感覺第二張里面是兩個黑底遮罩重疊在一起了，并且在前面的遮住了后面的，所以本來應(yīng)該是白透明的也變黑了。
只放一個黑底遮罩層，上面加多個白色透明DIV就行了0_0

2017年11月10日 20:33