应用1张或两张照片建立大情况网站

自从我发布了 大情况网站 合集以后，我收到了许多电子邮件，了解如何才可以用 CSS 来界定网站中的大情况。因而我就想，共享下我在制做大情况网站中所运用到的技术性也许是个非常好的主张。在这篇实例教程中，我会出示多种多样 CSS 例证来说解，怎样应用1张或两张照片来建立大情况网站。

普遍的不正确: 情况被裁掉 (查询 演试)

看1下 演试 文档实际效果, 在 1280px 辨别率时显示信息的是一切正常的。可是在高于这个辨别率的显示信息器中，情况的两则看起来就好像被切短的了。

案例 1: 单张照片 (请看 案例)

快速处理前面提到这1难题: 将照片边沿的色调设定成跟 BODY 情况色同样的色调。这里我以 Web Designer Wall 做为案例。请查验，下 图 中的边沿用的是单色?

CSS 一部分

CSS 一部分十分简易。特定 BODY 标识的情况图象 (position 精准定位为 center, top) 。

这里是 CSS 编码:

body {
  padding: 0;
  margin: 0;
  background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;

  width: 100%;
  display: table;
}

留意，在 BODY 挑选器中有两行附加的编码。这是以便避免在访问器的內容小于宽度时情况照片产生偏位 (这在 Firefox 中会出現).

案例 2: 两张照片 (请看 示范性)

在这个案例中，我提前准备劳动力作中1个款式模版, Design Jobs on the Wall。我给 BODY 标识运用了反复的软木板反复图案设计，#wrapper 标识运用了垂直居中的情况。

这里的小窍门是导出来了1张近似软木版图案、暗棕色的 gif 照片。

案例 3: 天空情况 (see demo)

在这个案例中，我给标识 BODY 设定了反复 1px 水平方位的渐变色。随后给标识 #wrapper 附上云层情况。

升级: 天空情况应用 HTML 挑选器 (请看 案例)

谢谢读者们的评价。下面的天空情况案例是应用 HTML 挑选器来显示信息渐变色情况，因此 #wrapper DIV 标识也就不必须了。这是1个更清理的方法。

马上免费下载 案例 zip