css - 如何使用 CSS 在现有背景上叠加渐变背景？

Question

我正在尝试将黑白线性渐变叠加到现有图像上。我把它设置如下；但是，仅显示渐变层。谁能指出我哪里出错了？

JS fiddle :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
}

Answer 1

尝试使用 RGBA 更改渐变颜色值(value)观

background: 
   linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(0,0,0, 1) 100%),
   url(...);

fiddle 示例:http://jsfiddle.net/J7bUd/

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