Question

我一直试图在我的背景图像上使用线性渐变，以便在背景底部从黑色到透明获得淡化效果，但似乎无法使其显示。< / p>

我在这里阅读了其他案例和例子，但其中没有一个适合我。我只能看到渐变或图像，但不能同时看到它们。这是link

只需点击第一个徽标，忽略该效果，之后我正在尝试的是整个网站的正文。

这是我的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)));
}

Answer 1

好的，我通过在行尾添加背景图片的网址解决了这个问题。

这是我的工作代码：

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

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

Answer 2

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)

Answer 3

＆＃xD;＆＃xA;

＆＃xD;＆＃xA ;

  #multi-background {＆＃xD;＆＃xA; box-sizing：border-box;＆＃xD;＆＃xA;宽度：123px;＆＃xD;＆＃xA;身高：30px;＆＃xD;＆＃xA; font-size：12pt;＆＃xD;＆＃xA; border-radius：7px; ＆＃的xD;＆＃XA; background：url（“https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png”），线性渐变（到底部，＃4ac425，＃4ac425）;＆＃xD;＆＃xA ; background-repeat：no-repeat，repeat;＆＃xD;＆＃xA; background-position：5px center，0px 0px;＆＃xD;＆＃xA;背景大小：18px 18px，100％100％;＆＃xD;＆＃xA;白颜色; ＆＃的xD;＆＃XA; border：1px solid＃e4f6df;＆＃xD;＆＃xA; box-shadow：.25px .25px .5px .5px black;＆＃xD;＆＃xA;填充：3px 10px 0px 5px;＆＃xD;＆＃xA; text-align：right;＆＃xD;＆＃xA; }

＆＃xD;＆＃xA;

 ＆lt; div id =“multiple-background”＆gt;已完成＆lt; / div＆gt;

＆＃xD;＆＃xA;

＆＃XA;

Answer 4

接受的答案很有效。只是为了完整性（因为我喜欢它的简洁性），我想用罗盘（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"));
}

在背景图像上使用css渐变

4 个答案: