怎么让背景铺满整个页面_css新手教程之背景图充满整个屏幕

想让整个界面有一个背景图片，自然想到的是在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就有值了，背景图片完整的充满整个屏幕。

扩展

url(images/beijing.png)——图片路径的位置；

no-repeat—— 图片不重复；

center 0px——center是距离页面左边的定位，0px是距离页面上面的定位；

background-position: center 0——就是图片的定位，同上；

background-size: cover;——把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中；

min-height: 100vh;——视窗的高度，“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/ window.innerHeight大小。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

怎么让背景铺满整个页面_css新手教程之背景图充满整个屏幕相关推荐

怎么让背景铺满整个页面_必能用到，一页PPT中想放超多图片怎么办？
本期介绍一个很实用的PPT技巧, 在公司介绍.活动总结.成果展示的最后, 我们经常会在一页PPT中, 放上大量头像或者活动照片. 放头像能让内部人员产生认同感, 让观众感觉到人情味. 放照片能将很多边 ...
背景铺满整个页面并且自适应
body{ background:url(top.png) no-repeat; background-size: cover; background-position: center center; ...
html铺满整个页面_html 怎么让背景图铺满整个页面？
html中,怎么让背景图片充满整个页面 html 怎么让背景图铺满整个页面雨声潺潺,像住在溪边.宁愿天天下雨,以为你是因为下雨而不来. 也就是一张网页内容有多长多宽,那一张背景图就要放大到那么大,例如 ...
html让背景图铺满整个页面
html让背景图铺满整个页面 <style> body {background:url("zz.jpeg") no-repeat center center; /*加载 ...
html 怎么让背景图铺满整个页面
为了让背景图片铺满整个页面,我们可以这样设置: 第一.页面只有屏幕大小: background: url(../images/banner.jpg) no-repeat;background-size ...
word文字铺满页面_Word 2010文档中让水印铺满整个页面的设置方法
在Word 2010中,通过简单的鼠标单击即可为文档添加水印,但这样只能在每一个文档页面内添加一个水印,这个在前面的文章已经有所介绍,具体请见:Word文档添加内置水印.个性化图片及文字水印的方法,但 ...
word加水印铺满java,Word 2010文档中让水印铺满整个页面的设置方法
在Word 2010中,通过简单的鼠标单击即可为文档添加水印,但这样只能在每一个文档页面内添加一个水印,这个在前面的文章已经有所介绍,具体请见:Word文档添加内置水印.个性化图片及文字水印的方法,但 ...
Speedoffice（Excel）中插入的图片怎么铺满整个页面
1,首先我们运行office软件,新建一份空白表格,如图. 2,然后点击上方工具栏"插入"图片--图片文件,找到图片,点击添加即可. 3,接着点击图片,右键选择"默认大 ...
vue组件中设置背景图片，随着页面高度的增加，背景图片能够不断延伸铺满屏幕
在做项目的时候,想要实现背景图片将整个页面铺满,等内容变多,高度超过屏幕高度的时候,背景图片仍然能够完全铺满. 第一种方式:(不是想要的) 第一种情况就是最外层设置一个div盒子,宽度100%,高度1 ...

怎么让背景铺满整个页面_css新手教程之背景图充满整个屏幕

怎么让背景铺满整个页面_css新手教程之背景图充满整个屏幕相关推荐

最新文章

热门文章