你可以在背景图像上叠加透明的css3渐变吗？

Question

我试图在背景图像的顶部放置一个css3渐变.使用下面的代码将背景图像放在渐变的顶部,但我试图以相反的方式进行,因此渐变在顶部充当蒙版.

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;

谢谢你的帮助

Answer 1

我为我的一个网站做了这个,希望它对你有用;

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

Answer 2

此答案中的示例不适用于可调整大小的div.

你的代码可以正常工作.但据我所知,CSS从左到右读取.所以你必须使用以下内容:

div {
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%), url('http://www.google.co.uk/logos/classicplus.png') repeat;
}

示例:http: //sapphion.com/2011/11/css3-background-gradient-on-top-of-an-image/