html - 将图像添加到 body wrapper 的最有效方法？

Question

所以我知道如何有效地为主体添加颜色包装，例如 webkit-box-shadow。

但这次我想将图像添加到我的纯色背景中，以包裹我的 body 。一个很好的例子是天蓝色背景， body 周围有随机的云彩。除了创建与您的 body 完美同步的背景图像之外，还有什么办法可以做到这一点吗？

这是我正在尝试实现的示例:http://i.stack.imgur.com/ttoLR.png

非常感谢任何可以提供任何建议的人!

Answer 1

与 HTML 中的许多内容一样，您可以通过多种方式实现这一点。我会做的是创建一个带有云的透明图像，并将其设置为父 div 的背景图像。

示例 CSS:

#wrapper { width: 1000px; background: url('clouds.png') center top transparent; }
#inner { background: #FFF; width: 940px; margin: 0 auto; border-radius: 6px; }

示例 HTML:

<div id="wrapper">
  <div id="inner">
    ...Your page contents...
  </div>
</div>