Overlay a CSS gradient with an RGBA colour?

Question

I'm wanting to add a transparent black overlay to a button for it' :active state, so when you click it, it's the same gradient but with just an overlay of e.g. rgba(0,0,0,.3)

The way I thought this would work is (using webkit in this example):

background:rgba(0,0,0,.3), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);

or without the comma, and the order reversed... but nothing shows up at all!

I'm not keen on adding another div to act as the overlay to do it, so is there a strictly CSS way to do this? I was thinking maybe it's a :before or :after pseudo class, but I don't have a clue how to use these!

Would really appreciate an answer, this has been bugging me for a long time.

Answer 1

You can't do that; rgba defines a colour, not an image. What you can do is use a gradient that's not a gradient:

background: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);

This is why I always specify background-image instead of using the shorthand when developing - it makes debugging easier.