CSS多个背景

问题描述：

我有一个网站，我想改变它的背景。我想把背景放在顶部和底部。CSS多个背景

这里是CSS代码：

 
div.bg_top { 
    background-image: url('bg_top.jpg'); 
    background-repeat: no-repeat; 
    background position: top center; 
} 

div.bg_bottom { 
    background-image: url('bg_bottom.jpg'); 
    background-repeat: no-repeat; 
    background position: bottom center; 
}

HTML代码：

 
<div class="bg_top"> 
    <div class="bg_bottom"> 
    Content Here. 
    </div> 
</div>

是正确的？

答

如果您修复background-position它应该工作：

background-position: center top;

实际上应该是'center top'。水平的首先，然后是垂直的。 – DisgruntledGoat 2010-03-19 12:49:29

@Disgruntled山羊 - 对不起，现在修复。大多数浏览器会按照任意顺序正确渲染它，因为这是一个常见的错误。 – 2010-03-19 15:23:13

你是对的 - 对于字符串值来说，这是真的，因为不存在模棱两可的可能性（'top'显然是垂直的）。虽然顺序对数字值是至关重要的。 – DisgruntledGoat 2010-03-20 01:21:24

答

我建议使用CSS速记最佳实践

.bg_top { background: url('bg_top.jpg') no-repeat top center; } 

.bg_bottom { background: url('bg_bottom.jpg') no-repeat bottom center; }

短手的使用不会自动使其成为“最佳实践”。不要打开“它让你的样式表变小”的说法。 – 2010-04-30 19:55:24

它可以帮助您快速查找CSS属性，使代码更具可读性并在编辑时节省时间。如果这不是最佳做法，请赐教macek。 – pixeltocode 2010-05-01 09:30:49

答

由于兰斯说只是改变background position:到background-position:它应该工作正常。

但我担心的是，你给背景的方式，以不同的分辨率，两个背景图像可能会重叠，它会拧紧所有的设计。因此，要使其与所有需要选择其他选项的分辨率兼容。我会建议使用任何图像编辑器，并根据需要放置图像并制作一张图像，然后将该图像用作背景。

答

为避免更改html，您还可以将其中一个背景放在html中，另一个放在body中。并使用最小高度（IE6的高度）来避免重叠。

相关推荐