带有纯色的背景渐变

Question

我需要做以下事情： div的顶部是渐变图像，然后在底部继续作为纯色。我可以用简单的CSS来实现吗？我知道下面的代码是无效的。

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

注意：图片填充的前225像素应该没有背景颜色。

- marcias

Answer 1

据我所知，您需要使用渐变来填充纯色，以便可以正确地设置它。

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

这里是您更新的fiddle链接

支持多重背景的浏览器应该可以正常使用基本支持，唯一的问题是IE <= 8。渐变背景可能在IE9上有问题，但我认为它应该可以工作（我无法测试IE9）。如果真的有问题，请查看colozilla以获取修复方法。

- vals

---

好的，这正是我正在寻找的东西，只剩下两个问题：这个跨浏览器吗？其次，在动态高度的div中如何工作？我问这个问题是因为你使用了background-size属性。- 我刚刚删除了那个属性，它对我起作用了。 - marcias

我已编辑答案，包括跨浏览器信息。关于图像尺寸，我猜不声明图像大小不应该是个问题，渐变也是如此，但我不是很确定。 - vals

@AnaMaria在下面的回答是正确的方法，这就是CSS应该被使用的方式，而不是这种变通方法。 - run_the_race

Answer 2

请查看这个代码片段，告诉我是否符合您的要求。

FIDDLE

HTML

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

CSS

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

- AnaMaria

---

图片已经失效了，但是概念很好。 - run_the_race

Answer 3

我会这样做：

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

这将只在 div 的顶部放置您的背景图像；其余部分将是您为整个 div 背景选择的颜色。

- Marian Boricean

---

你试过这个吗？我正在使用Chrome，它将颜色放在任何地方，甚至在图像下面，即使它是透明的。 - marcias

也许我没有理解你的问题，但是在图像下面放置颜色有什么问题吗？如果它是一个渐变到与背景相同的颜色。请查看我之前制作的网站：http://mychinesephrases.com，我在body对象上放置了渐变。 - Marian Boricean

看这个，这是我的fiddle图片。现在你可以看到粉色的颜色在图片下面.imgbg { width:350px; height:300px; background:#f7d8e8 url('blue2.hu/danone/nogravity/img/right_column_bg_top.png') 我想要的是，粉色应该只从图片结束后开始。 - marcias

抱歉，我刚开始使用fiddle，这是我的编辑链接： http://jsfiddle.net/YPcVB/1/ - marcias

好的，现在我明白你的目标是什么了 :) 看起来AnaMaria已经给出了你的答案。我可能会使用嵌套的DIV来实现这个。 - Marian Boricean