Question

我正在创建一个由印刷设计师设计的网站。背景是两张图片的结论：

沿y轴重复并与页面底部对齐的一个渐变一个与页面底部对齐并居中的图像（圆圈）

演示： enter image description here

圆圈部分非常大，并且大部分页面内容都在其上。（~900px by~750px）。

如果页面很小，我需要添加滚动条。如果页面很大。我需要第一个图像（垂直）和背景颜色（水平）来填充我的区域。我想使用多个背景，但该网站需要IE8支持。

Answer 1

为渐变切割1px条带并在体上水平重复。将附件设置为固定。

剪切圆圈并将其作为内容容器的背景图像。这可能是一个具有透明度的png，以允许显示先前的渐变。

CSS

body {
   background: url('bg.jpg') center bottom repeat-x fixed;
}

.container {
   background: url('circle.png') no-repeat center bottom;
   margin: 0 auto;
   min-height: 750px;
   width: 900px;
}

HTML

<body>
 <div class="container">
    content here
 </div>
</body>

Answer 2

或者，您可以使用CSS3放置渐变并完全避免图像。一些较旧的浏览器不支持它，但它比使用静态渐变图像更灵活。

查看这个方便的生成器 - 只需选择颜色和样式，它将为您提供代码：http://www.colorzilla.com/gradient-editor/

将多个背景对齐到页面底部？

2 个答案: