Question

我一直在尝试将背景放在我网站的背景中。我能用这段代码把我想要的背景颜色：

<body bgcolor="#F5F2D4">
<div class="Gallery">
<h1> Gallery </h1>
</div>
</body>

之后，在CSS中我做了以下

.Gallery h1 {
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 55px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.3999996185303px;
background-color: White;
}

背景看起来像这样（B =米色，W =白色：

-------------------------
|BB|WWWWWWWWWWWWWWWWWW|BB|
|BB|WWWWWWWWWWWWWWWWWW|BB|
|BB|WWWWWWWWWWWWWWWWWW|BB|
|BB|WWWWWWWWWWWWWWWWWW|BB|
|BB|WWWWWWWWWWWWWWWWWW|BB|
-------------------------

这使我想要的颜色在背景中，但它没有缩放。它只有几个与浏览器边界不同的像素，直到白色开始，有没有办法让距离增加？

另外，有没有办法让白色背景一直向下滚动？

非常感谢。

Answer 1

让html，body和.gallery全部height: 100%让.gallery占据整个屏幕高度。

如果您希望.gallery具有固定宽度（如下例所示），请为其width添加margin: 0 auto，使其在屏幕中水平居中。如果您希望它具有固定宽度，请在padding: 0 100px上添加body，如果您希望.gallery的左侧和右侧有100个像素为米色。

html,
body {
  height: 100%;
}

body {
  background-color: beige;
  margin: 0;
}

.gallery {
  background-color: white;
  width: 960px;
  margin: 0 auto;
  height: 100%;
}

<div class="gallery">
</div>

Answer 2

图片不是由单个背景构成：它由多个不同背景的元素组成：

+-----------------------+
|BB|YYYYYYYYY|NNNNNNN|BB|
|BB|YYYYYYYYY|NNNNNNN|BB|
|BB|YYYYYYYYY|NNNNNNN|BB|
|BB|YYYYYYYYY|NNNNNNN|BB|
|BB|YYYYYYYYY|NNNNNNN|BB|
+-----------------------+

字母代表某些有色/不同的背景。

例如，下面我使用了三个元素：

.all {
  min-height: 100vh;
  height:500px;
    background-color: green;
  width: 100%;

  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
}
.left {
  height: 100%;
  width: 45%;
  background-color: blue;
  position: absolute;
  margin: 0;
  padding: 0;
  left: 5%;
}
.right {
  position: absolute;
  height: 100%;
  width: 45%;
  background-color: red;
  display: inline-block;
  margin: 0;
  padding: 0;
  right: 6%;
}

<div class="all">

  <div class="left">i will always be on left. Think of me like a column!</div>
  <div class="right">i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i
    will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i
    will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!i will always be on right. Think of me like a column!!!!!!!!!!!!!</div>
</div>

注意我使用了背景颜色，但也可以使用图片等。

在背景里面的背景

2 个答案: