Do I need to overlap a background image with a gradient inside one background property?

Question

When I want to combine two background images, I can just separate them with a comma, for example:

.foo {
  background-image: url(bg_1.jpg), url(bg_2.jpg);
  background-position: center center, left top;
  background-repeat: no-repeat, repeat;
}

and etc.

What I want to do is overlay a background image with color (e.g. rgba (0,0,0, .5)) without creating a separate layer using pseudo elements or png images. I thought maybe css gradients might come in handy?