gpt4 book ai didi

html - 将背景图片限制为仅正文

转载 作者:太空宇宙 更新时间:2023-11-04 08:53:59 25 4
gpt4 key购买 nike

我有背景,但是当我制作页脚时,正文的背景图像跨越到页脚;我怎样才能将这个背景限制在 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;
}
<div class="footer">
<p>Posted by: asds</p>
<p>Contact information: <a href="mailto:someone@example.com">
someone@example.com</a>.</p>
</div>

最佳答案

只需为您的页脚设置背景颜色即可。 <body>默认为白色,所以尝试添加

.footer {
background: #ffffff;
}

Of course, you'll notice in the example below that the background again at the bottom and edges. You can, as APAD1 mentioned, change your html structure, or remove the default margin from <body> and adjust your footer some more

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:someone@example.com">
someone@example.com</a>.</p>
</div>

关于html - 将背景图片限制为仅正文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43237871/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com