在背景图像上使用 css 渐变

Question

我一直在尝试在我的背景图像顶部使用线性渐变，以便在我的背景底部获得从黑色到透明的褪色效果，但似乎无法使其显示出来。

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

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

这是我的 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好的，我通过 在行尾 添加背景图像的 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>

原文由 Pam 发布，翻译遵循 CC BY-SA 4.0 许可协议

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)

原文由 Ma9ic 发布，翻译遵循 CC BY-SA 3.0 许可协议