1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Css 如何使纯颜色/背景图自适应的铺满全屏

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

时间:2020-01-22 09:12:11

相关推荐

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

摘要

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。