老师我想请问下这节为什么center center不是居中,而center bottom却是居中呀?
来源：8-4 编程练习
吹吹风泡泡茶
2022-04-02 21:41:27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
font-size: 40px;
background-color: red;
}
.p1{
font-family: 隶书;
}
body{
background-color: yellow;
background-image: url(http://climg.mukewang.com/5ea016c108c1f40603610240.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
</style>
</head>
<body>
<p>http://www.imooc.com</p>
<p class="p1">慕课网</p>
<p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p>
<p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到</p>
</body>
</html>
搜索
复制
1回答
-
好帮手慕小小
2022-04-04
同学你好，此时背景图片设置的位置是参照页面已有内容区域的位置的。图片位置是在下方居中的位置。例如：
测试参考代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p { font-size: 40px; background-color: red; /* opacity: 0.1; */ } .p1 { font-family: 隶书; } body { background-color: yellow; background-image: url(http://climg.mukewang.com/5ea016c108c1f40603610240.jpg); background-repeat: no-repeat; background-position: center bottom; border: #F0F8FF 2px solid; } .p2{ height: 50px; background-color: bisque; } /* * { margin: 0px; padding: 0px; } */ </style> </head> <body> <p>http://www.imooc.com</p> <p class="p1">慕课网</p> <p class="p1"> 慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到最好的互联网技术牛人，也可以通过免费的在线公开视频课程学习国内领先的互联网IT技术</p> <p class="p1">慕课网是垂直的互联网IT技能免费学习网站。以独家视频教程、在线编程工具、学习计划、问答社区为核心特色。在这里，你可以找到</p> <p class="p2"></p> </body> </html>祝学习愉快~
1
相似问题