如何在同一页面上创建两个不同的背景？答案

【问题标题】：How do I create two different backgrounds on the same page?如何在同一页面上创建两个不同的背景？
【发布时间】：2017-01-27 11:56:40
【问题描述】：

谁能告诉我如何创建本网站所示的背景： www.zucoffee.com

另外，我怎样才能得到弯曲的分离？我知道它们是两个 div，但边界是如何弯曲的？

【问题讨论】：

您好，欢迎来到 StackOverflow。看起来您希望我们为您编写一些代码。虽然许多用户愿意为陷入困境的编码人员编写代码，但他们通常只有在发布者已经尝试自己解决问题时才会提供帮助。展示这项工作的一个好方法是包含您迄今为止编写的代码、示例输入（如果有的话）、预期输出以及您实际获得的输出（控制台输出、回溯等）。您提供的详细信息越多，您可能收到的答案就越多。检查FAQ 和How to Ask。
也就是说，你好像什么都没试过。您是否使用浏览器的开发人员工具检查过元素？也许检查CSS？提示：这是一张背景图片。

标签： html css background background-color

【解决方案1】：

曲线分离来自于标题图像底部有紫色以创建曲线的事实。实际文件可以在这里看到：http://www.zucoffee.com/wp-content/themes/zu-coffee/images/header-bg.gif

这（据我所知）是相当普遍的做法，即让一个背景服务于整个页面，并在仅服务于页眉和/或页脚的背景之上有另一个单独的背景。根据网站的风格，这可能包括有趣的分隔，我还看到 .png 用于让页眉/页脚设计“淡入”到主背景中。

显然有很多不同的方法可以做到这一点，我相信有人会想补充我的答案，但你的示例网站选择的方式是在其正文和标题上使用 background 属性标签来添加他们的图像。下面是他们的 css 文件中的一个 sn-p：

body { 
  padding:0; 
  margin:0;
  background:#4b1259 url(images/tile-bg.gif) repeat-x;
  width:100%;
  display:table;
  font:16px/22px Georgia;
  color:#ffffff;
  text-align:left; 
}
.header-bg { //this is where i found them adding the header image.
  margin-bottom:20px;
  background:url(images/header-bg.gif) no-repeat center top;
}

【讨论】：

【解决方案2】：

Div 是块级元素，因此是块状（正方形/矩形）。

如果您使用 Chromes 开发工具或 Firefox 中的 Firebug 检查相关页面上的元素 header-bg，您可以看到它使用 css 设置具有弯曲下边缘的背景图像。图片为 header-bg.gif。

【讨论】：