0

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;
}
Manoj
  • 2,059
  • 3
  • 12
  • 24
Sagspot
  • 25
  • 1
  • 2
  • 10

2 Answers2

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

ziale
  • 111
  • 4
1

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);

Dhruvi Makvana
  • 895
  • 5
  • 17