0

我正在创建一个由印刷设计师设计的网站。背景由两个图像组成：

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

演示： 在此处输入图像描述

圆圈部分很大，上面有大部分页面内容。（约 900 像素乘约 750 像素）。

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

4

2 回答 2

2

为渐变剪下一个 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>
于 2013-01-17T18:00:59.937 回答
0

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

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

于 2013-01-17T18:06:48.530 回答