CSS 你能在背景图片上叠加一个透明的 css3 渐变吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8049276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you overlay a transparent css3 gradient over a background image?
提问by Pineapple Sunset
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.
我试图在背景图像的顶部放置一个 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;
Thanks for your help
谢谢你的帮助
回答by Yoann
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%);
}回答by Alan
The example from this answerwon't work with resizeable divs.
此答案中的示例不适用于可调整大小的 div。
Your code would work fine. But as I understand it, CSS reads from the right to the left. So you would have to use the following:
您的代码可以正常工作。但据我所知，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;
}
Example: http://sapphion.com/2011/11/css3-background-gradient-on-top-of-an-image/
示例：http: //sapphion.com/2011/11/css3-background-gradient-on-top-of-an-image/
