将背景图片仅限于身体

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

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:[email protected]"> 
 
    [email protected]</a>.</p> 
 
</div>

来源

2017-04-05 user7678931

我没有看到一个背景图片？如果您不想让身体的背景显示出来，请在页脚上设置背景。 – Slime

页脚是'body'的一部分，所以如果你想要一个不同的页脚背景，你必须为页脚定义一个背景。或者，不要将背景放在'body'上，而是为'body'中的'body'内容创建一个容器，该容器不包含页脚代码并将背景应用于该内容。 – APAD1

只要给您的页脚的背景颜色。该<body>默认为白色，尝试添加

.footer { 
    background: #ffffff; 
}

当然，你会在下面的例子中注意到，在底部和边缘再次背景。您可以为APAD1提到的，改变你的HTML结构，或者从<body>删除默认的保证金和调整你的页脚一些

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; 
 
}

<div class="footer"> 
 
    <p>Posted by: asds</p> 
 
    <p>Contact information: <a href="mailto:[email protected]"> 
 
    [email protected]</a>.</p> 
 
</div>

来源

2017-04-05 17:39:00

将背景图片仅限于身体

回答

相关问题