在背景图片上使用CSS渐变 [英] Use css gradient over background image

问题描述

我一直在尝试在我的背景图像顶部使用线性渐变，以便在我的背景底部从黑色到透明的淡化效果，但似乎不能使它显示。 / p>

我已经阅读过其他案例和例子，但没有一个是为我工作。我只能看到梯度或图像，但不能同时看到它们。
以下是链接

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

这是我的css代码：

解决方案

好的，我通过添加背景图片的

这是我的工作代码：

  .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.com/images/stackoverflow.jpg'）no-repeat;背景：-webkit-梯度（线性，左上，左下，停止色（0％，rgba（0,0,0,0）），色停（59％，rgba（0,0,0,0） ）），色停（100％，rgba（0,0,0,0,65））），url（'http://www.skrenta.com/images/stackoverflow.jpg'）无重复;背景：-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.com/images/stackoverflow.jpg'）no-repeat;背景：-o-线性梯度（top，rgba（0,0,0,0）0％，rgba（0,0,0,0）59％，rgba（0,0,0,0.65）100％） ，url（'http://www.skrenta.com/images/stackoverflow.jpg'）no-repeat;背景：-ms-线性梯度（top，rgba（0,0,0,0）0％，rgba（0,0,0,0）59％，rgba（0,0,0,0.65）100％ ，url（'http://www.skrenta.com/images/stackoverflow.jpg'）no-repeat;背景：线性梯度（到底部，rgba（0,0,0,0）0％，rgba（0,0,0,0）59％，rgba（0,0,0,0.65）100％），url （'http://www.skrenta.com/images/stackoverflow.jpg'）no-repeat; height：494px; width：620px;}  

 < div class = >这里我们去< / div>  

I've been trying to use a linear gradient on top of my background image in order to get a fading effect on the bottom of my background from black to transparent but can't seem to be able to make it show.

I've read other cases here and examples but none of them are working for me. I can only see the gradient or the image but not both of them. Here's the link

Just click on the first logo, ignore that effect, what I'm trying is in the body in the whole site after that.

This is my css code:

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

解决方案

Ok, I solved it by adding the url for the background image at the end of the line.

Here's my working code:

.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.com/images/stackoverflow.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.com/images/stackoverflow.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.com/images/stackoverflow.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.com/images/stackoverflow.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.com/images/stackoverflow.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.com/images/stackoverflow.jpg') no-repeat;
  height: 494px;
  width: 620px;
}

<div class="css">
  here we go
</div>

这篇关于在背景图片上使用CSS渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！