在背景图像上使用 css 渐变

我一直试图在我的背景图片上使用线性渐变，以获得背景底部从黑色到透明的褪色效果，但似乎不能使其显示。

我在这里读过其他案例和例子，但没有一个对我有用。我只能看到渐变或图像，但不能两者都看到。 这里是 < a href = “ http://nazer.urucas.com/”> 链接

只要点击第一个标志，忽略这个效果，我正在尝试的是在整个网站的身体之后。

这是我的代码:

body {
background: url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}

195053 次浏览
小开 
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)
小开
最佳答案

好的，我通过添加背景图像 终点站的 URL 解决了这个问题。

这是我的工作代码:

.css {
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('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
height: 200px;
}
<div class="css"></div>

小开

接受的答案很有效。只是为了完整起见(因为我喜欢它的简短) ，我想分享如何用指南针(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("https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.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>


提交答案