Наложение с вырезанной прямоугольной маской

Question

Сценарий: Я хочу покрыть элемент прямоугольной маской (фон # 000 с непрозрачностью 0.8, например). Затем в области покрытия есть область, для которой я хочу выделить.

Вот скриншот пример:

(Как вы заметили, есть са прямоугольник, вырезанный из маски темнеть в Photoshop, это легко - просто поместите слой сверху и вырезать прямоугольник. вне).

Как я могу заставить его работать в CSS?

Боковое примечание. Этот трюк, похоже, используется для «обучения пользователей новым функциям».

Answer 1

Для этого вы можете использовать границы или квадратные тени. И используйте их на псевдоэлементе, чтобы минимизировать разметку.

Пример с коробкой-тени:

div{ 
 
    height:100%; 
 
    position:relative; 
 
} 
 
.overlay{ 
 
    display:inline-block; 
 
    position:relative; 
 
    z-index: 1; 
 
} 
 
.overlay:after{ 
 
    content:''; 
 
    position:absolute; 
 
    top:0; left:0; 
 
    width:100%; height:100%; 
 
    box-shadow: 0px 0px 0px 999px rgba(0,0,0,.8); 
 
}

<div> 
 
    <p>Some content</p> 
 
    <p class="overlay">Other content</p> 
 
    <p>More content</p> 
 
</div>

Answer 2

Это может быть сделано только в webkit на данный момент. используя свойство -webkit-mask-box-image. кроме этого мы не сможем достичь этого только с помощью css.

Answer 3

Вы можете использовать CSS z-index для отображения выделенного элемента над накладкой, как это:

.overlay{ 
    display:none; 
    position:absolute; 
    background:rgba(0,0,0,0.8); 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    z-index:999; 
} 

.highlight{ 
    position:relative; 
    z-index:9999; 
} 

Live Demo