css background color property - css

Question

This syntax in a css background property works well:
.my-element {
background:
linear-gradient( rgba(131,131,131,0.8), rgba(98,98,98,0.8) ),
url('img/background.jpg')
}
I don't need a gradient though. I'd like the overlay to be from one color with some level of opacity. I know I could just have the starting color the same as the end color of a gradient but is it possible to replace 'linear-gradient' with just rgba color including opacity?. It does not seem to work.
EDIT: I might have not been clear in my question. What I'd like is:
.my-element {
background:
color(rgba(131,131,131,0.8),
url('img/background.jpg')
}
The above does not work. I can't use the hex notation for the color either as it does not include opacity.

Answer 1

You have two possibilities.
Either consider a CSS variables to optimize the code and avoid repeating the color twice:
.box {
--c:rgba(131,131,131,0.8);
height:300px;
width:300px;
background:
linear-gradient(var(--c),var(--c)),
url(https://i.picsum.photos/id/1002/800/800.jpg) center/cover;
}
<div class="box"></div>
Or use blending but you may not have the exact same result and you need to adjust the value of the blending based on the color used:
.box {
height:300px;
width:300px;
background:
url(https://i.picsum.photos/id/1002/800/800.jpg) center/cover,
rgba(131,131,131,0.8);
background-blend-mode: exclusion;
}
<div class="box"></div>

Answer 2

Add an absolute overlay color:
<div class="my-element"><div class="overlay"></div>My element color</div>
And CSS:
.my-element {
background: url('img/background.jpg')
position: relavive;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(200, 200, 200, 0.8);
pointer-events: none;
}
.my-element {
background: url('img/background.jpg')
position: relavive;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(200, 200, 200, 0.8);
pointer-events: none;
}
<div class="my-element"><div class="overlay"></div>My element color</div>

Answer 3

Did you want something like that?
.my-element {
background: linear-gradient(#e66465, #9198e5),
url('img/background.jpg')
}
.my-element2 {
background:
linear-gradient( rgba(131,131,131,0.8), rgba(98,98,98,0.1) ),
url('img/background.jpg')
}
<div class="my-element">My element color</div>
<br>
<div class="my-element2">My element color</div>