Can you overlay a transparent css3 gradient over a background image?

Question

I'm trying to put a css3 gradient over the top of a background image. Using the code below puts a background image on top of my gradient, but i'm trying to do it the other way around, so the gradient acts as a mask on top.

url(images/darkwood.png), -webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat; background:  url(images/darkwood.png), -moz-linear-gradient(#EEF, rgba(0,0,0,1)) 300px 50px no-repeat,  -moz-linear-gradient(#EFE, rgba(0,0,0,1)) 0 0 no-repeat; 

Thanks for your help

Answer 1

I have do this for one of my website, Hope it's work for you;

body {  	margin: 0;  	padding: 0;  	background: url('https://i.stack.imgur.com/MUsp6.jpg') repeat;  }    body:before {  	content: " ";  	width: 100%;  	height: 100%;  	position: absolute;  	z-index: -1;  	top: 0;  	left: 0;  	background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);  }