html-在背景图像上使用css渐变

我一直在尝试在背景图片上使用线性渐变,以使背景下的效果从黑色变为透明,但似乎无法使其显示。

我在这里阅读了其他案例和示例,但没有一个对我有用。 我只能看到渐变或图像,但不能同时看到它们。这是链接

只需单击第一个徽标,忽略该效果,此后,我要尝试的是整个网站的正文。

这是我的CSS代码:

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

Pam asked 2019-10-08T23:29:56Z
4个解决方案
111 votes

好的,我通过在行尾添加背景图片的网址来解决此问题。

这是我的工作代码:

<div class="css"></div>
<div class="css"></div>

Pam answered 2019-10-08T23:30:22Z
10 votes
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)
Ma9ic answered 2019-10-08T23:30:53Z
4 votes

<div id="multiple-background"> Completed </div>
<div id="multiple-background"> Completed </div>

Mohammad Faizan answered 2019-10-08T23:31:18Z
3 votes

接受的答案效果很好。 仅出于完整性考虑(因为我喜欢它的简短性),我想与指南针(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"));
}
Christopher Lörken answered 2019-10-08T23:31:43Z
translate from https://stackoverflow.com:/questions/16589519/use-css-gradient-over-background-image