htmlcssbackground-blend-mode

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

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

enter image description here

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

  • 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