Add opacity between menu and background

I have a side header and when it is displayed I need the background behind it to have an opacity, I've already tried several ways I found it on the internet, but none worked if anyone can help me I'll be grateful for the css and a picture

Image

.header {
    background-image: linear-gradient(to top, #efefef, #ffffff);
    box-shadow: -0.8px 0.6px 6px 0 rgba(0, 0, 0, 0.15);
    height: 70px;
    width: 100% !important;
    mix-blend-mode: undefined;
    background-image: linear-gradient(to top, #efefef, #ffffff);
    box-shadow: -0.8px 0.6px 6px 0 rgba(0, 0, 0, 0.15);
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.71;
    letter-spacing: normal;
    text-align: left;
    color: #666666 !important;
    li {
        list-style: none;
    }
    ul {
        padding-left: 60px;
    }
    .nav>li.active a,
    .nav>li>a:active {
        border-bottom: solid #66bbb0;
        border-width: 4px;
        color: #66bbb0 !important;
        background-color: inherit;
        text-decoration: none;
    }
    li {
        line-height: 70px;
        height: 70px;
        a {
            padding: 0 10px;
            line-height: 70px;
            height: 70px;
            display: inline-block;
            color: #666666;
        }
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .nav>li>a:hover {
        text-decoration: none !important;
        background-color: #e6e6e6 !important;
        color: #666666 !important;
    }
    #language {
        width: 80px;
        ul {
            padding: 0;
            min-width: 80px;
        }
        a {
            text-decoration: none;
            img {
                width: 30px;
                height: 30px;
                margin-right: 10px;
            }
        }
    }
    .dropdown {
        position: relative;
    }   

    @media screen and (max-width: 650px){

        .navbar-toggle{
            z-index: 999;            
        }
        .collapse{
            top: 0;
            right:-100%;
            display: block !important;
        }
        .in.collapse{
            top: 0;
            right: 0;
        }

        .lateral {
            height: 100% !important;
            width: 87%;
            position: fixed;
            z-index: 1;         
            background-color: #fff;
            overflow-x: hidden;
            -webkit-transition: all .5s linear; 
               -moz-transition: all .5s linear; 
                 -ms-transition:all .5s linear; 
                 -o-transition: all .5s linear;   
                    transition: all .5s linear;      
        } 


    }    
}