带纯色的背景渐变

我必须做到以下几点： div的顶部是渐变图像，然后在底部继续为纯色。我可以用简单的CSS来做到这一点吗？我知道以下是无效的。带纯色的背景渐变

{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;

注意：第一225px，其图像填充，应该是没有背景色

来源

2013-07-29 marcias

据我所知，你需要使用一个渐变的纯色，这样就可以正确设置。

的CSS将是：

.imgbg { 
    width:255px; 
    height:355px; 
    background: url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8); 
    background-position: 0px 0px, 0px 112px; 
    background-repeat: no-repeat, no-repeat; 
    background-size: 255px 112px, 255px 233px; 
}

下面是your updated fiddle

基本询问服务应该是罚款浏览器支持多背景，唯一的问题是与IE < = 8渐变背景可能是一个问题与IE9，但我认为它应该工作（我无法测试IE9）。如果确实存在问题，请参阅colozilla以获得修复。

来源

2013-07-29 17:13:32 vals

嗯，这是我正在寻找的东西，只剩下2个问题：这是如何crossbrowser？其次，这是如何在动态高度div中工作的？我问这个，因为你使用了背景大小的属性。 - 我刚刚删除了这个属性，它对我很有用。 – marcias

我编辑了包含crossbrowser信息的答案。关于图像大小，我想不说明图像的大小不应该是一个问题，所以渐变，但我不太确定。 – vals

我会做到以下几点：

#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }

这将只是把你的背景div上方的图像;其余的部分将是您为整个div背景选择的颜色。

来源

2013-07-29 12:52:34

嗯，你试过这个吗？我使用的是铬合金，它在任何地方都可以使用这种颜色，即使在图像下面，它也是透明的。 – marcias

也许我不明白你的问题，但将图像放在图像下会出现什么问题？如果它是与背景颜色相同的渐变色。查看我之前做过的网站：[http://mychinesephrases.com]（http://mychinesephrases.com），我把渐变放在'body'对象上。 –

检查一下，我的图像在小提琴中。现在你可以看到粉红色在图像下.imgbg {width：350px;高度：300像素;背景：＃f7d8e8 url（'blue2.hu/danone/nogravity/img/right_column_bg_top.png'）我想要的是，粉红色应该只在图片的结尾下方开始。 – marcias

看看这个小提琴，告诉我这是不是你想要的。

FIDDLE

HTML

<div class="imgbg"></div>

CSS

.imgbg { 
    width:255px; 
    height:355px; 
    background:#f7d8e8 url('http://placehold.it/255x255') no-repeat; 
}

来源

2013-07-29 13:25:24 AnaMaria

我也做一个链接： http://jsfiddle.net/YPcVB/1/ – marcias

带纯色的背景渐变

回答

相关问题