Question

我有背景但是当我做页脚时，身体的背景图像跨越到页脚;我怎样才能将这个背景仅限于身体？这是我的代码：

body {
  font-family: 'Open Sans', sans-serif;
  background: #282828;
  color: #fff;
  padding-top: 20px;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #FF7F50, #23A6D5, #FF7F50);
  background-size: 400% 100%;
  background-repeat: no-repeat;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

<div class="footer">
  <p>Posted by: asds</p>
  <p>Contact information: <a href="mailto:someone@example.com">
     someone@example.com</a>.</p>
</div>

Answer 1

只需给你的页脚一个背景色。 <body>默认为白色，请尝试添加

.footer {
  background: #ffffff;
}

当然，您在下面的示例中会注意到底部和边缘的背景。您可以像APAD1提到的那样更改您的html结构，或者从<body>中移除默认边距并更多地调整页脚

＆＃13;

body {
  font-family: 'Open Sans', sans-serif;
  background: #282828;
  color: #fff;
  padding-top: 20px;
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #FF7F50, #23A6D5, #FF7F50);
  background-size: 400% 100%;
  background-repeat: no-repeat;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

.footer {
  background: #ffffff;
}

＆＃13;

<div class="footer">
  <p>Posted by: asds</p>
  <p>Contact information: <a href="mailto:someone@example.com">
     someone@example.com</a>.</p>
</div>

＆＃13;

仅将背景图像限制为正文

1 个答案: