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

这是your updated fiddle

对于支持多种背景的浏览器，基本支持应该没问题，唯一的问题是IE＆lt; = 8.渐变背景可能是IE9的问题，但我认为它应该可行（我无法测试IE9）。如果确实存在问题，请参阅colozilla进行修复。

Answer 2

我会做以下事情：

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

这只会将你的背景图片放在div的顶部;其余部分，将是您为div的整个背景选择的颜色。

Answer 3

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

FIDDLE

HTML

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

CSS

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

背景渐变与纯色

3 个答案: