CSS/JS: Hintergrundbild Kantengradient auf soliden Hintergrund

Question

So eine Website Header vorstellen, mit diesem Bild als div Hintergrund:

Ist es möglich für mich, CSS und JS/JQuery ein erstellen Gradient an den Bildrändern, der auf Transparenz endet? Oder eine feste Farbe?

Mein ideia war die Steigung auf den Hintergrund Kanten aufzubringen und dann eine Farbe anwenden dahinter in diesem Effekt führt:

Danke.

Answer 1

Ist das wonach Sie gesucht haben?

.container { 
 
    width: 75vw; 
 
    height: 75vh; 
 
    background: url("https://i.stack.imgur.com/DrmAg.jpg"); 
 
    position: relative; 
 
} 
 

 
.container::before, 
 
.container::after { 
 
    position: absolute; 
 
    content: ""; 
 
    display: block; 
 
    width: 50px; 
 
    height: 100%; 
 
    top: 0; 
 
} 
 

 
.container::before { 
 
    background: linear-gradient(to right, rgba(203, 130, 43, 1), rgba(203, 130, 42, 0)); 
 
    left: 0; 
 
} 
 

 
.container::after { 
 
background: linear-gradient(to left, rgba(203, 130, 43, 1), rgba(203, 130, 42, 0)); 
 
    right: 0; 
 
}

<div class="container"></div>