部分全透明遮罩層

時間 2019-12-07

標籤部分透明简体版

原文原文鏈接

騰訊微雲，在新用戶剛進入網站時的提示。
第一眼看到這樣的部分全透明遮罩的效果，感受實現的方式有：html

1.使用圖片，在相應的位置進行挖空全透明處理。可是這樣若是有多處提示，就得使用多張圖片

2.或者像騰訊微雲本身的實現方式，壘積木似的一塊一塊拼接，這樣作缺點也很明顯

在看到一篇博客上的思路，若是把白色區域當作div，黑色半透明部分當作div的各個border，這樣事情就變得簡單得多：

代碼實現網站

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>背景遮罩</title>
  <style>
    .cover {
        display: block;
        position: absolute;
        left: 0; top: 0; right: 0; bottom: 0;
        border: 0 solid #000;
        opacity: .75;
        filter: alpha(opacity=75);
        z-index: 9;
        /* 邊緣閃動問題fix */
        box-shadow: 0 0 0 100px #000;
        overflow: hidden;
        width: 167px;
        height: 39px;
        border-width: 20px 1065px 2277px 48px;
        display: block;    
      }
    .cover::before {
        content: '';
        width: 100%;
        height:100%;
        border-radius: 50%;
        border: 400px solid #000;
        position: absolute;
        left: -400px; top: -400px;
        box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);
    }
  </style>
</head>
<body>
  <h3>這是一個背景遮罩</h3>  
  <div class="cover" id="cover"></div>
</body>
</html>

實現效果：
spa

（這樣咱們只須要改變四面border的值，就可以改變border的位置，改變div的width 或者height就能夠改變白色區域的形狀。可是這樣的缺點是隻能造成有限的全透明形狀）code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。