html 背景图铺满整个页面背景图片居中
新建一个html文件,把你的图片放在一个文件夹内
我的图片放在了lib
的文件夹里面
不平铺且放大:
body{
background: url(./lib/bg.jpg) no-repeat;
background-size: 100%;
}
因为背景设置在主体,所以要定义为body{}
。
background-image:url(图片)
,这个是添加图片的意思。
no-repeat
是不平铺的意思。
background-size: 100%
是放大到整个页面的意思。
效果
图片随内容大小变化而变化的,页面滑动也会铺满页面大小
body{
background: url(./lib/bg.jpg) no-repeat;
background-size: 100%;
background-attachment: fixed;
}
横向平铺
body{
background: url(./lib/bg2.jpg);
background-repeat:repeat-x;
}
background-repeat:repeat-x
就会横向平铺
效果
纵向平铺
body{
background: url(./lib/bg2.jpg);
background-repeat:repeat-y;
}
background-repeat:repeat-y;
这个指令是纵向平铺。
全屏平铺
body{
background: url(./lib/bg2.jpg);
background-repeat:repeat;
}
background-repeat:repeat;
是全屏平铺。
可以用background-size
放大缩小。
效果
背景图片居中
body{
background: url(./lib/bg2.jpg);
background-repeat: no-repeat;
background-position: center;
height: 100vh;
width: 100%;
}
background-position: center;
就是位置居中的指令
智鼎在线IT团队: scroll和auto区别:scroll不论内容是否可以完整呈现,是否溢出元素外,强制显示横竖滚动条。auto则是只有某个方向溢出内容才会显示滚动条。
Iregisterforws: 太感谢啦,头秃了一上午,一万个赞也不嫌多!!!
Kwan的解忧杂货铺@新空间代码工作室: 博主的博客是我的学习良师,每篇文章都充满了启发,让我得到了更多的智慧,每一次阅读都是一次知识的盛宴,让我增长了不少见识,你的博文总是给予我新的思考和启发,真的很感谢你一直以来的辛勤付出。期待你的未来更新。
清柳街: 第一步都重启之后为什么更改失败呀😭😭😭😭
杭州社畜码农: 播主,请教一下,你没遇到过这个问题吗,运行项目之后报错org.springframework.beans.factory.BeanDefinitionStoreException: Failed to parse configuration class [net.sy.SyLadZZFApplication]; nested exception is org.springframework.context.annotation.ConflictingBeanDefinitionException: Annotation-specified bean name 'a' for bean class [net.sy.d.h.a] conflicts with existing, non-compatible bean definition of same name and class [net.sy.b.a]