在背景图片上使用css渐变
我一直试图在我的背景图像上使用线性渐变，以便在背景的底部从黑色变为透明但是看起来无法使其显示。
我已经阅读了其他案例和例子，但没有一个为我工作。 我只能看到渐变或图像，但不能同时看到。 这是链接
只要点击第一个标志，忽略那个效果，我想要的是在整个网站的身体之后。
这是我的CSS代码：
body { background: url('http://www.skrenta.comhttp://img.dovov.comstackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1))); } 好的，我通过在行尾添加背景图片的url来解决这个问题。
这是我的工作代码：
.css { background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.comhttp://img.dovov.comstackoverflow.jpg') no-repeat; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://www.skrenta.comhttp://img.dovov.comstackoverflow.jpg') no-repeat; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.comhttp://img.dovov.comstackoverflow.jpg') no-repeat; background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.comhttp://img.dovov.comstackoverflow.jpg') no-repeat; background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.comhttp://img.dovov.comstackoverflow.jpg') no-repeat; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://www.skrenta.comhttp://img.dovov.comstackoverflow.jpg') no-repeat; height: 200px; }
<div class="css"></div>
body { margin: 0; padding: 0; background: url('img/background.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%); }
请注意：这只使用webkit，所以它只能在webkit浏览器中工作。
尝试：
-moz-linear-gradient = (Firefox) -ms-linear-gradient = (IE) -o-linear-gradient = (Opera) -webkit-linear-gradient = (Chrome & safari)
被接受的答案很好。 为了完整（因为我喜欢它的简短），我想分享如何使用指南针（SCSS / SASS）：
body{ $colorStart: rgba(0,0,0,0); $colorEnd: rgba(0,0,0,0.8); @include background-image(linear-gradient(to bottom, $colorStart, $colorEnd), url("bg.jpg")); }
#multiple-background{ box-sizing: border-box; width: 123px; height: 30px; font-size: 12pt; border-radius: 7px; background: url("data/icons/woocons1/CheckboxFull.png"), linear-gradient(to bottom, #4ac425, #4ac425); background-repeat: no-repeat, repeat; background-position: 5px center, 0px 0px; background-size: 18px 18px, 100% 100%; color: white; border: 1px solid #e4f6df; box-shadow: .25px .25px .5px .5px black; padding: 3px 10px 0px 5px; text-align: right; }
<div id="multiple-background"> Completed </div>
