想让整个界面有一个背景图片, 自然想到的是在 body 上加 background, 代码如下:
- body {
- width:100%;
- height: 100%;
- /* 加载背景图 */
- background: url("../static/images/index/backImg.jpg") no-repeat;
- /* 背景图垂直, 水平均居中 */
- background-position: center center;
- /* 当内容高度大于图片高度时, 背景图像的位置相对于 viewport 固定 */
- background-attachment: fixed;
- /* 让背景图基于容器大小伸缩 */
- background-size: cover;
- /* 设置背景颜色, 背景图加载过程中会显示背景色 */
- background-color: rgba(41, 50, 39, 1);
- }
发现 body 的高度为 0, 所以图片不能显示; 解决办法是给 html 设置宽高各 100%, 这样 body 就有值了, 背景图片完整的充满整个屏幕.
为了帮助大家让学习变得轻松, 高效, 给大家免费分享一大批资料, 帮助大家在成为前端工程师, 乃至全栈工程师的路上披荆斩棘. 在这里给大家推荐一个前端全栈学习交流圈: 784783012 欢迎大家进群交流讨论, 学习交流, 共同进步.
当真正开始学习的时候难免不知道从哪入手, 导致效率低下影响继续学习的信心.
但最重要的是不知道哪些技术需要重点掌握, 学习时频繁踩坑, 最终浪费大量时间, 所以有效资源还是很有必要的.
扩展
url(images/beijing.PNG)-- 图片路径的位置;
no-repeat-- 图片不重复;
center 0px--center 是距离页面左边的定位, 0px 是距离页面上面的定位;
background-position: center 0-- 就是图片的定位, 同上;
background-size: cover;-- 把背景图像扩展至足够大, 以使背景图像完全覆盖背景区域. 背景图像的某些部分也许无法显示在背景定位区域中;
min-height: 100vh;-- 视窗的高度,"视区" 所指为浏览器内部的可视区域大小, 即 Windows.innerWidth/ Windows.innerHeight 大小.
来源: http://www.jianshu.com/p/ec31c7566065