Как я могу достичь этого эффекта прозрачности с помощью 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 позиционирование. Просто настройте альфа-значение тени (или цвета) по своему усмотрению.

---

Окончательный результат

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>