如何使用css實現這種透明效果？

Question

這個設計是在photoshop中創建的，我試圖轉換爲html和css。 我有一個背景圖像（與綠燈），減少不透明覆蓋和一些文字的圖標位於中心。我如何在html和css中獲得如下所示的效果？

Answer 1

點擊這裏！

基本上，你可以創建一個透明的圓形，帶有白色（或黑色）邊框！

background: transparent; 
border-radius: 50%; 
border: 1000px solid rgba(0, 0, 0, 0.5); 

JSFiddle

Answer 2

你可以申請一個border-radius到內部元件和box-shadow像這樣：

Codepen Demo

div { 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: url(...) no-repeat; 
    background-size: cover; 
} 

p { 
    border-radius: 50%; 

    /* add responsive behaviour */ 
    height : 60vw; 
    width : 60vw; 

    /* but limit its max-height/width */ 
    max-height : 400px; 
    max-width : 400px; 

    /* apply a gray shadow outside */ 
    box-shadow : 0 0 0 50vmax rgba(255,255,255, .4); 
} 

50vmax是一個陰影蔓延足夠寬和中間對齊例如可實現通過flexbox定位。只要你喜歡調整陰影（或顏色）的alpha值。

---

最終結果

Answer 3

.container { 
 
    height:400px; 
 
    width:400px; 
 
    position:relative; 
 
overflow:hidden; 
 
    } 
 

 
.overlay { 
 
     top:50%; 
 
    left:50%; 
 
    margin-top:-500px; 
 
    margin-left:-500px; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    background-color: transparent; 
 
    border-style: solid; 
 
    box-sizing: content-box; 
 
    z-index:999; 
 
    pointer-events:none; 
 
    border: 400px solid rgba(0,0,0,.9); 
 
    }

<div class="container"> 
 
    <div class="overlay"></div> 
 
</div>