灵活div的背景渐变填充，使用css还是图像？

Question

我使用固定高度的图像用渐变色填充div，使用类似于： background：transparent url（green_bg.gif）repeat-x scroll 0 0;

然而，它只填充高度等于图像高度。根据文本中的文本数量，使用图像或使用CSS，填充高度变化的div的背景的最佳方法是什么？

Answer 1

我认为你要找的是一个用背景图像填充的div（这是一个渐变），然后用剩下的方式填充纯色？

如果是这样，在photoshop（或您选择的图像编辑器）中，获取渐变中最后一个像素的十六进制。为了论证，让我们说它是＃FF0000。然后这样做：

.myDiv {
    background: #FF0000 url(green_bg.gif) repeat-x 0 0;
}

这将用＃FF0000（红色）填充背景，并在背景上叠加背景图像，从div的顶部开始水平重复（x轴）。制作红色背景的方法是增加div中的内容量。

此外，如果您想确保渐变的某个部分始终显示，则可以增加CSS中的padding-top。

.myDiv {
    background: #FF0000 url(green_bg.gif) repeat-x 0 0;
    padding-top: 20px;
}

如果这不是你所得到的，请在你的问题中澄清。

Answer 2

我会说背景SVG。但是afaik只能在safari atm中得到支持。

或者webkit可能有一个执行渐变的属性。或者画布，如果你真的需要它。