How to reduce the opacity of a background-blend-mode

Question

Am looking for a way to reduce the opacity of background-blend-mode. The opacity in my code affects both the color and the image. I want it to affect only the blend mode. I want to achieve such an effect as in

.example {
    background-image: url(../assets/image.jpg);
    background-size: cover;
    background-color: rgb(77, 82, 86);
    background-blend-mode: multiply;
    opacity: 0.6;
}

Answer 1

Try using the rgba function instead of rgb and opacity. The 4th parameter is the opacity ranging between 0 and 1. From your screenshot I assume you will need 0.9

.example {
    background-image: url(../assets/image.jpg);
    background-size: cover;
    background-color: rgba(77, 82, 86, 0.9);
    background-blend-mode: multiply;
}

Codepen

Answer 2

background-blend-mode is for blending multiple background images together or blend it with the background color.

on the other hand opacity is used to specifies the opacity/transparency of an element, including the element's background.

When you only want to lighten any color i.e. background-color, border-color, font-color you can go with RGBA or #AARRGGBB where A stands for alpha(transparency).

Try giving `background-color: rgba(77, 82, 86, 0 - 1);