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

Question

我正在使用固定高度的图像来填充具有渐变颜色的 div，方法如下:背景:透明 url(green_bg.gif) repeat-x scroll 0 0;

但是它只填充一个等于图像高度的高度。根据其中的文本量填充高度变化的 div 背景的最佳方法是什么，是使用图像还是使用 css？

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

如果这不是您的意思，请在您的问题中澄清。