摘要

他喵的我觉得一般就是三种需求：

1、纯颜色

解释：即只有background-color，没有图
需求：应至少充满一个视窗，如果内容超出一个视窗，自适应填充。比如知乎首页。

2、背景图

需求很动态，background-size、background-attachment、background-repeat三者搭配使用

3、纹理图

解释：指只有一个纹理片段
需求：应重复该纹理至充满一个视窗，如果内容超出一个视窗，自适应填充。

纯颜色

body, html{height: 100%;margin: 0px;padding: 0px;
}
.bg{width: 100%;min-height: 100%;background-color: #070d82;
}

背景图

background-size解决老大问题（图片的长宽要吻合老大的需求，老大的规矩就是规矩！）

cover：视窗是老大，contain：背景图是老大，百分比：父元素是老大，auto：没有老大，共赢关系，双aotu时图片一定会保持原大小，这个性质好棒啊

background-attachment决定图片如何随滚轴变化
background-repeat决定图片大小不够时是否复制

~~贴一份常用配置好了

（为什么我不设置width捏，因为width和height有区别噢！百度一下吧）

body, html{height: 100%;margin: 0px;padding: 0px;
}
.bg{background-image: url("../pic/lanBlack.jpg"); min-height: 100%;background-size : cover; background-attachment: fixed;background-repeat:no-repeat; }

浅记录一下。。如果这一页下面还有东西，用一下100vh..

纹理图

先贴一个我的宝藏纹理图网站：Transparent Textures

body, html{height: 100%;margin: 0px;padding: 0px;
}
.bg{min-height: 100%;background-color: #070d82;background-image: url("../pic/bright-squares.png"); //下面三个都取得默认属性值，都可以省略不写background-size : auto auto; //双auto可以保证纹理图不会被拉伸和缩放background-attachment: scroll;background-repeat: repeat;}

---人生 too hard

Css 如何使纯颜色/背景图自适应的铺满全屏相关推荐

css中调整高度充满_CSS(十三).高度如何铺满全屏
该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...
Vue-cli 中为单独页面设置背景图片铺满全屏的方法
Vue-cli 中为单独页面添加张背景图片从而达到铺满全屏的方法 <template><div id="logo"></div> </te ...
php如何把图片铺满,用Dreamweaver8设计网页，怎样使背景图片铺满全屏？
楼主说的是要背景图片只出现一次,而且是铺满全屏的吧!这是不可能的,背景图片是不能用代码控制它的大小的,它是多大,做背景的时候就只能是多大!最多是重复N个图片我们在网页制作过程中,尤其是初学的人们读喜 ...
html网页自动铺满屏幕,如何使HTML元素的区域铺满全屏
今天我们海东科技就讲一讲如何让一副图片填满整个屏幕(除去浏览器所占区域哦).通常有两种比较经典的效果,一个就是在PC上经常看到一些网页鼠标动一下翻一整页,另外一个就类似与手机APP第一次打开是的引导页 ...
html网页自动铺满屏幕,HTML+CSS入门高度如何铺满全屏
本篇教程介绍了HTML+CSS入门高度如何铺满全屏,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < IE6不认识!important声明,IE7.IE8.Firefox. ...
php网页全屏背景图代码,HTML5 body设置全屏背景图片的示例代码
用什么代码实现?不允许有白色底色产生,因为手机高度不一样设计图要标准(750)确认是背景图(通屏底图)应用场景:移动端宣传页面或者活动页面错误的写法:加到div中结合图片设置min-height, ...
Vue基础技术|背景图铺满全屏效果
背景图: 背景图尺寸信息: 新建全局样式文件global.styl,并编写全局样式查看效果图: 问题:通过背景图原图比对发现显示效果不全. 如何实现背景图的全屏呢?可以通过css3提供的backgr ...
web图片铺满网页_html5的video的背景图片poster铺满全屏大小方法
html5支持视频播放,而且趋势,facebook也全面切换到html5了,最近做一个简单的视频播放器,测试了好多jplayer,video.js之类的都觉得不太好,所以自己写一个最简单的,不过发现了 ...
背景图片铺满全屏的方法
1.css3有一个属性:background-size:cover;可以让背景图片完全覆盖屏幕,但是IE9以下浏览器无效. 2.IE有个滤镜: filter:progid:DXImageTransfo ...

Css 如何使纯颜色/背景图自适应的铺满全屏

摘要

纯颜色

背景图

纹理图

Css 如何使纯颜色/背景图自适应的铺满全屏相关推荐

最新文章

热门文章