如何使用CSS在现有背景上覆盖渐变背景? [英] How do I overlay a gradient background over an existing background with CSS?

问题描述

我正在尝试将白黑色线性渐变叠加到现有图像上.我将其设置如下所示；但是，仅显示渐变层.有人可以指出我出了错吗?

I am trying to overlay a white-black linear gradient to an existing image. I have it set up like below; however, only the gradient layer is showing. Can someone point out where I went wrong?

JS Fiddle: http://jsfiddle.net/6nJJD/

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
}

推荐答案

尝试使用小提琴示例: http://jsfiddle.net/J7bUd/

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

Try also changing rgba(255,255,255, 0) with transparent: the result is slightly different but probably it's exactly what you're trying to achieve

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