Estoy añadiendo un estilo css a un sidebar generado por W3.CSS, sin embargo al realizar el codigo que muestro mas a bajo, todo el sidebar y su contenido se vuelve mas opaco y a final de cuentas no sucede lo que deseo, q es que la imagen de fondo obtenga como un filtro del color azul que deseo, entiendase que, la imagen cambie de color o que se funda con el color degradado: la imagen de fondo con el color degradado por encima pero que se vea la imagen. trate de colocar algo parecido a esto
div.gr {
background:url(assets/img/sidebar-6.jpg);
}
div.opacity{
background-image:linear-gradient(to bottom, #33ccff 25%, #0033cc 100%), url(assets/img/sidebar-6.jpg) ;
}
<div class=" gr w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" style="width:280px;right:100;" id="mySidebar">
<button class=" w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close ×</button>
<div class="container">
<div class="col">
<div class="row">
<a class=" w3-hover-grayscale mx-auto d-block" href="http://globalr.net/site/"><img src="assets/img/GR.png" width="130" height="50" ></a>
</div>
<div class="row ">
<div class="col ">
<a href="#GENERAR" data-toggle="collapse">
<button type="button" class="btn btn-default j " ><img src="assets/img/menu1.png" width="20" height="20" > Herramientas de Gestion </button>
</a>
<div id="GENERAR" class="collapse">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-default j">Crear Proyecto</button>
<button type="button" class="btn btn-default j">Modificar Proyecto</button>
<button type="button" class="btn btn-default j">Eliminar Proyecto</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>