Question

基本上我有一个在Photoshop中创建的网站，我正在尝试在HTML / CSS中翻译它，我在一些造型方面有点麻烦我想知道如何使用多个背景图像/颜色对网站进行分区就像我以为我可以用div做到这一点，但我认为无论如何都不会有任何/所有相关的帮助将被赞赏

快速了解我的意思是

导航栏

* BG Image1

内容

BG image2

内容 _------------

页脚

Answer 1

您的问题太模糊，但无论如何，您可以使用div或section标签，并通过CSS将它们设计为您的心脏内容

Answer 2

我确定你想要什么，但根据你的伪计划，我可以想象这样的事情：

<div id="nav">NAV</div>
<div id="div1"><p>
Lorem ipsum dolor sit amet, in quam. Vivamus aptent sodales lorem, tempus vel duis sapien id fusce, eu tincidunt. Vel orci pharetra nulla penatibus. Lacus eget a. Eu est vel maecenas et, curabitur sed integer nibh, molestie nulla </p>
<p>
Mi et, a tellus quis nonummy ultricies egestas quis, elementum lacus aenean pellentesque nisl, quam aenean. Enim quis iaculis, adipiscing volutpat et vestibulum molestie sit, morbi quis sit duis mauris, pellentesque tincidunt 
</p>
</div>

CSS

#nav{
  background-color: #ccc;
  width: 100%;
  height: 80px;
}

#div1{
  background-image: url("https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg");
}

#div2{
  background-image: url("http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg");
}

小提琴： https://jsfiddle.net/ypncww57/2/

div之间没有gat： https://jsfiddle.net/ypncww57/3/

Answer 3

1。）HTML5中有一个<section>元素，您可以通过CSS（使用类或ID）分配背景图像。您可以将现有DIV和其他元素包装在section标记中。

2。）如果你不喜欢它，你仍然可以使用DIV来包装你的部分，并通过CSS设置这些（使用类或ID）。

如何使用图片/背景颜色对网站进行分区？

导航栏

3 个答案: