Question

在我的网站上，我试图将背景分成不同的区域。 An area with just a solid black background and an area that will have a repeating background, this can be seen in the image attached. 我试图让两边的图案区域水平和垂直延伸，直到当然，它到达可视网页的末尾。

对我而言，这似乎是一个特别棘手的概念，我想在两边使用部分，但我只是习惯于相对定位元素，我希望它是精确的。我还考虑过进入Photoshop创建一个过宽而高大的图案，并且只是覆盖整个区域。

这两者似乎都是次优解决方案。

关于如何设置，你有什么建议吗？

Answer 1

一个简单的解决方法是为body设置背景，然后用黑色全高中心表格元素覆盖它。为了使.main-section满高度，您需要将body和html设置为height: 100%。

请参阅代码段。

html, body {
  height: 100%;
  margin: 0;
}
body {
  background: rgb(255,255,0);
}

.main-section {
  background-color: #000;
  height: 100%;
  display: table;
  margin: 0 auto;
  width: 50%;
  padding: 20px;
}

.section {
  color:#fff;
}

<body>
<div class="main-section">
    <div class="section"><h1>Content Sample</h1>
      <p>Lorem ipsum dolor sit amet, nostro invidunt referrentur ut eam. Cu has veritus laboramus. Ex vel munere mollis placerat, quidam iracundia pro ut. Qui et verterem petentium consectetuer, per vidit nobis aeterno ex. Nullam postulant efficiantur ius an, vix dictas insolens posidonium id. Ea primis feugiat sapientem qui, possit semper ex nec. Cu mea civibus ocurreret.

Eu enim lucilius efficiendi ius, ludus assentior eos ut, his probo mucius option ne. Natum populo ius ne, atqui integre quaestio in pro. Justo alterum vis cu, ne tantas oblique repudiandae cum, no putent theophrastus est. Aliquip bonorum posidonium te nec, tritani impedit dissentiet duo an. Id eros porro duo, ut oportere honestatis disputationi ius, nec iisque scaevola repudiandae no. Sea ut mollis periculis suscipiantur, eos vidisse civibus no.

Eos facer detracto an, ubique minimum insolens sed ea. Commodo ancillae ut usu. Iudico delenit sed cu, an persecuti elaboraret usu. Essent aeterno fastidii et duo, nam in viris utamur scriptorem, dicant impedit et sea. Eu vis luptatum prodesset. Mel prima accusamus an, cu ignota impetus inimicus pro, quis ignota cum no.

Audire debitis an has, populo volumus definiebas his et, sed ei cetero quaeque. Eu vel idque aliquip. Viderer argumentum pri no, est in assentior reprehendunt. Has rebum apeirian no, consul graeci has ex. Minim dicunt aliquid at vel. Mea summo scaevola cu. Et adhuc quodsi pri, eam an omnes volutpat explicari.

Et diam illud recteque vim. Feugiat accusam scripserit at mel. Elit euripidis et eam, no cum noster facilis abhorreant. Populo suscipiantur eu per, doctus vulputate accommodare ex has, congue debitis in sit.</p>
    </div>
</div>
</body>

Answer 2

你可以这样说：

.main-container {
    width: 100%;
    text-align: center;
    background-image: url(http://abduzeedo.com/sites/default/files/originals/pattern-library.jpg);
}
.sub-container {
    display: inline-block;
    margin: 0 auto;
    padding: 0 200px;
    background-color: black;
}
.content-block {
    background-color: white;
    width: 600px;  //You can add your width here like 1024px 
    margin: 0 auto;
    padding: 20px 15px;
}

<div class="main-container">
    <div class="sub-container">
        <div class="content-block">
            <h1>Add your content here</h1>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        </div>
    </div>
</div>

将网页背景拆分为不同的区域，以获得不同的颜色，图案等

2 个答案: