如何使用CSS在现有背景上叠加渐变背景?

时间:2013-05-28 11:44:04

标签: css css3

我正在尝试将白黑线性渐变叠加到现有图像上。我把它设置如下;但是,只显示渐变层。有人可以指出我哪里出错了吗?

JS小提琴:http://jsfiddle.net/6nJJD/

HTML

<div>hello</div>

CSS

div {
    background:linear-gradient(to bottom, #ffffff 0%, #000000 100%), url("http://us.123rf.com/400wm/400/400/adroach/adroach1210/adroach121000001/15602757-flower-and-bird-ornaments-retro-tile-repeat-as-many-times-as-you-like.jpg") repeat #eae7de;
    color:#544a46;
    font:62.5%/1.6 Helvetica, Arial, Sans-serif;
    height:500px;
    width:500px
}

3 个答案:

答案 0 :(得分:4)

尝试使用RGBA

更改渐变颜色
background: 
   linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(0,0,0, 1) 100%),
   url(...);

示例小提琴:http://jsfiddle.net/J7bUd/

尝试使用rgba(255,255,255, 0)更改transparent:结果略有不同,但可能正是您要实现的目标

答案 1 :(得分:0)

像这样?

http://jsfiddle.net/6nJJD/2/

 linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, #000000 100%)

答案 2 :(得分:0)

您可以使用渐变中的RGBA来完成此操作。

http://jsfiddle.net/6nJJD/3/

CSS:

linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%)

您可以修改“0.65”值以达到所需的透明度。

  

如果您想要创建更多渐变,可以访问Ultimate Css Gradient Generator

希望这个HElps