Question

任何人都可以告诉我如何创建本网站上显示的背景： www.zucoffee.com

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

Answer 1

Div是块级元素，就像块状（正方形/矩形）一样。

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

Answer 2

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

这（据我所知）是一种相当普遍的做法，它有一个背景为整个页面提供服务，并且在其上面有另一个单独的背景，它只用于页眉和/或页脚。根据网站的风格，这可能包括有趣的分色，我也看到过.pngs用于得到页眉/页脚设计以淡出＆＃39;进入主要背景。

显然有很多不同的方法可以做到这一点，我确定有人会想要添加我的答案，但您的示例网站选择的方式是使用background属性他们的身体和标题标签添加他们的图像。来自下面的css文件的片段：

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 个答案: