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

-3

谁能告诉我如何创建此网站上显示的背景： www.zucoffee.com如何在同一页面上创建两个不同的背景？

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

2016-09-19 wabzi

您好，欢迎来到StackOverflow。看起来你希望我们为你写一些代码。尽管许多用户愿意为遇险的编码人员编写代码，但他们通常只在海报已尝试自行解决问题时才提供帮助。证明这一努力的一个好方法是包含迄今为止编写的代码，示例输入（如果有的话），期望的输出以及实际获得的输出（控制台输出，回溯等）。您提供的细节越多，您可能会收到的答案就越多。检查[FAQ]和[问]。 – IndieRok

这就是说，好像你还没有尝试过任何东西。您是否使用浏览器的开发工具检查了元素？也许检查CSS？提示：这是一个背景图片。 – IndieRok

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

这（据我所知）是相当普遍的做法，有一个背景服务于整个页面，并有另一个单独的背景顶部的服务只是标题和/或页脚。取决于网站的风格，这可能包括有趣的分色，我也看到.png用于让页眉/页脚设计“淡入”主背景。

显然有许多不同的方法可以做到这一点，我相信有人会希望添加到我的答案中，但是您的示例网站选择的方式是在其正文和标题标记上使用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; 
}

来源

2016-09-19 18:07:38 Termonator145

Div是块级元素，并且是这样的块形（正方形/矩形）。

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

来源

2016-09-19 18:05:11

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

回答

相关问题