本文介绍了如何使用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
}
推荐答案
尝试使用 RGBA 值
background:
linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(0,0,0, 1) 100%),
url(...);
小提琴示例: 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在现有背景上覆盖渐变背景?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!