Question

在css中做背景时，我通常只使用从顶部开始的渐变背景，然后最终结束纯色。所以我切了一层薄的渐变，重复-x，然后将背景设置为某种颜色

(background:#color url(image location.png) repeat-x)

然而，我面临着一个我需要指导的独特障碍。我有以下内容：

背景是渐变
然而，还有一个重复的背景图像
重复所述背景图像直到页面结束
查看模型侧面的图片屏幕截图（http://www.petpinpoint.com/sidebar.png）

关于如何实现这一点的想法？我不能只剪切它并重复，因为背景需要跨越页面的整个高度（这是动态的和变化的）。

Answer 1

你需要两个背景，但渐变应该是半透明的PNG

html {
    background: #E6E6E6 url(/content/images/figure.png) repeat scroll 0 0;
    height:100%;
    width:100%;
}
body {
    background: transparent url(/content/images/gradient.png) repeat-x right top;
    height:100%;
    width:100%;
}

对于始终存在的IE6，

编辑，

<!--[if lt IE 7]>
body {
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/images/gradient.png',sizingMethod='scale');
}
<![endif]-->

Answer 2

如果你想要两个背景，那么你需要两个全宽和高的块内容元素。在第一个（<body>）上，您将渐变图像设置为背景。在第二个（<div>的第一个<body>元素）上，您将重复的图像设置为背景。您需要确保的是，重复的图像本身具有透明背景（您可以使用gif和png执行此操作）。

Answer 3

如果您将渐变背景应用于html元素，并将重复图像应用于body元素，该怎么办？重复图像是否具有透明背景，因此渐变将显示？

我没有测试过这个想法，它可能与旧版本的IE（它没有很好地处理透明度）有问题，但它可能值得研究。

Answer 4

您可以将页面/正文的background-color设置为渐变的底部颜色。使渐变尽可能高，只需重复x，而不是y。然后，当页面高于渐变背景时，它会淡化为背景颜色，这将无限期地继续。

Answer 5

所以你有2个不同的背景？你可以使用photoshop或fireworks将它们合并在一起。然后根据需要使用css中的单个背景。

如何使用CSS显示此背景？

5 个答案: