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

示例from this answer不适用于可调整大小的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/

Answer 3

它可能对你有帮助：

yourselector {
    background: linear-gradient(rgba(0,130,170,0),rgba(0,130,170,1)), url('/path/image.jpg');
}

更多渐变风格请访问：https://www.colorzilla.com/gradient-editor/

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

3 个答案: