Как затемнить background?

Question

[Андрей Волчара]

Нужно при открытом сайдбаре затемнять wrapper на 50%

HTML

<div class="wrapper">
      <input type="checkbox" id="check">
      <label for="check">
        <i class="fas fa-bars" id="menu_open"></i>
        <i class="fas fa-times" id="menu_close"></i>
      </label>
      <header>
        <div class="sidebar">
          <div class="sidebar-header"></div>
          <div class="tabs-triggers">
            <a href="#tab-1" class="tabs-triggers__item"><i class="fas fa-qrcode"></i><span>Dashboard</span></a>
            <a href="#tab-2" class="tabs-triggers__item"><i class="fas fa-link"></i><span>Shortcuts</span></a>
            <a href="#tab-3" class="tabs-triggers__item"><i class="fas fa-stream"></i><span>Overview</span></a>
            <a href="#tab-4" class="tabs-triggers__item"><i class="fas fa-calendar-week"></i><span>Events</span></a>
            <a href="#tab-5" class="tabs-triggers__item"><i class="fas fa-question-circle"></i><span>About</span></a>
            <a href="#tab-6" class="tabs-triggers__item"><i class="fas fa-sliders-h"></i><span>Settings</span></a>
            <a href="#tab-7" class="tabs-triggers__item"><i class="fas fa-envelope"></i><span>Contact</span></a>
          </div>
        </div>
      </header>
      <div class="content">
        <div class="tabs-content">
          <div id= "tab-1" class="tabs-content__item">Content 1</div>
          <div id= "tab-2" class="tabs-content__item">Content 2</div>
          <div id= "tab-3" class="tabs-content__item">Content 3</div>
          <div id= "tab-4" class="tabs-content__item">Content 4</div>
          <div id= "tab-5" class="tabs-content__item">Content 5</div>
          <div id= "tab-6" class="tabs-content__item">Content 6</div>
          <div id= "tab-7" class="tabs-content__item">Content 7</div>
        </div>
      </div>
    </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@1,500&display=swap');

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
}


.wrapper {
    height: 100vh;
    background-color: #0e1621;
}

header {
    background-color: #17212b;
    height: 54px;
    border-bottom: 1px solid rgba(5,9,14,.1);
}

.sidebar {
    font-family: 'Ubuntu', sans-serif;
    position: fixed;
    width: 240px;
    height: 100%;
    background-color: #17212b;
    left: -240px;
    transition: all .3s ease;
    border-right: 1px solid rgba(5,9,14,.1);
}

.sidebar-header {
    text-align: center;
    font-size: 40px;
    height: 54px;
    background-color: #276899;
    color: #fff;
}

.tabs-triggers__item {
    display: block;
    color: #fff;
    font-size: 15px;
    height: 50px;
    width: 100%;
    line-height: 50px;
    padding-left: 30px;
    box-sizing: border-box;
    transition: all .3s ease;
}

.tabs-triggers__item:hover {
    background-color: #232e3c;
}

.tabs-triggers__item--active {
    background-color: #0e1621;
    border-left: 2px solid #276899;
}

.tabs-triggers__item i {
    margin-right: 10px;
}

.tabs-triggers__item span {
    letter-spacing: 1px;
    text-transform: uppercase;
}

#check {
    display: none   ;
}

label #menu_open, label #menu_close {
    position: absolute;
    cursor: pointer;
    line-height: 45px;
    color: #fff;
    margin: 4px 20px;
    font-size: 25px;
    transition: .3s ease;
}

label #menu_close {
    opacity: 0;
    visibility: hidden;
}

#check:checked ~ label #menu_open {
    margin-left: 245px;
    opacity: 0;
    visibility: hidden;
}

#check:checked ~ label #menu_close{
    margin-left: 245px;
    opacity: 1;
    visibility: visible;
}

#check:checked ~ header .sidebar {
    left: 0;
}

#check:checked ~ body .wrapper {
    background-color: #fff;
}

@media (max-width: 750px) {
    .sidebar {
        height: 100%;
        width: 60px;
        left: 0;
        margin: 54px 0;
    }
    .sidebar-header, #menu_open, #menu_close{
        display: none;
    }
    span {
        position: absolute;
        margin-left: 23px;
        opacity: 0;
        visibility: hidden;
    }
    .tabs-triggers__item i {
        margin-left: -10px;
    }
} 

.tabs-content__item {
    margin-top: 20%;
    font-size: 50px;
    display: none;
    height: 100%;
    padding: 20px;
    text-align: center;
    color: #fff;
}

.tabs-content__item--active {
    display: block;
}

Answer 1

[Арсений Матыцин]

1. Псевдоэлемент для сайдбара, который позиционирован так, что закрывает контент и имеет цвет rgba(0,0,0,0.5) к примеру.
2. Тень от сайдбара — расточительно, но работает.
3. Реально существующий узел в DOM, который, как и в первом случае, позиционируется поверх контента.

И т.д.