背景渐变与纯色

Question

我必须执行以下操作:div的顶部是渐变图像,然后在底部继续作为纯色.我可以用简单的CSS做到这一点吗？我知道以下内容无效.

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

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

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

这是你的更新小提琴

对于支持多个背景的浏览器,基本的支持应该没问题,唯一的问题是IE <= 8.渐变背景可能是IE9的问题,但我认为它应该工作(我无法测试IE9).如果它确实是一个问题,请参阅colozilla进行修复.