Затененный задний фон для модального окна
Довольно часто встречающаяся задача: затененный задний фон модального окна или элемента веб страницы.Решается задача довольно просто, с использованием псевдоэлементов :before и :after. Обращаю внимание, что их можно использовать только в парных тегах вида <div></div>, и соответственно нельзя в тегах вида input (т.е. не парных). Еще одним нюансом является то, что значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.
Например задача получить страницу вида:

Решается примерно так: сначала определим стили CSS:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | .application:before {    content: '';   position: fixed;   z-index: 2;   top: 0;   left: 0;   right: 0;   bottom: 0;    background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;   background-size: cover;     filter: blur(2px); } .application:after {   content: '';   position: fixed;   z-index: 2;   top: 0;   left: 0;   right: 0;   bottom: 0;   background: rgba(0,0,0,.5); } .select_area_color_lent_tag{   position: fixed;   top: 50%;   left: 50%;   transform: translate(-50%, -50%);   width: 250px;   height: 250px;   background-color: white;   border: 1px solid black;   padding: 20px;   display: flex;   flex-wrap: wrap;   text-align: center;   justify-content: space-around;   z-index: 20;     } | 
HTML для этих стилей может выглядеть таким:
| 1 |         <div class="application" style="display: none">            <div class="select_area_color_lent_tag">            </div>        </div>  | 
В нужный момент достаточно показать блок application, и получим картинку как на скриншоте выше,а именно затененный задний фон модального окна:
| 1 | $(".application").show() | 
А здесь можно посмотреть еще много советов по работе с CSS




