Css 纯色背景渐变

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

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

---

注意：图像填充的第一个225px应该没有背景色

我将执行以下操作：

#myDiv{背景：#f7d8e8 url（'/img/right_column_bg_top.png'）重复-x；

---

这将把你的背景图像放在div的顶部；剩下的部分，将是您为div的整个背景选择的颜色。

检查这把小提琴，告诉我这是否是您想要的

HTML

---

据我所知，你需要为纯色使用渐变，这样你才能正确地设置它

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;
}

这是

---

对于支持多种背景的浏览器来说，基本的支持应该很好，唯一的问题是IE，你试过这个吗？我用的是chrome，它把颜色放在任何地方，甚至在图像下面，它是透明的。也许我不理解你的问题，但是把颜色放在图像下面有什么不对？如果是渐变到与背景相同的颜色。查看我不久前制作的这个网站：我在

主体上放置了渐变。查看这个，我的图像在小提琴中。现在你可以看到图片下面是粉红色。imgbg{宽度：350px；高度：300px；背景：#f7d8e8 url（'blue2.hu/danone/nogravity/img/right_column_bg_top.png'））我想要的是，粉红色应该只从图像结尾下方开始。对不起，我刚开始使用小提琴，这是我编辑的链接：好的，现在我明白了你的目标：）看起来你从上面的AnaMaria那里得到了答案。我可能会使用嵌套div。好吧，这确实是我在寻找的东西剩下的两个问题：交叉浏览器是什么？第二，这在动态高度div中是如何工作的？我问这个问题是因为，你使用了背景大小属性。-我刚刚删除了该属性，它对我有效。我编辑了答案以包含交叉浏览器信息。关于图像大小，我想不说明图像的大小不应该是pr问题，梯度也是如此，但我不是很确定。
.imgbg {
   width:255px;
    height:355px;
   background:#f7d8e8  url('http://placehold.it/255x255') no-repeat;
}

.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;
}