1_web_设置全屏背景

web_设置全屏背景



第一次写web的博客,以后博客里就会出现各种各样的博客了
希望自己的技术能够更上一层楼






登鹳雀楼
王之涣
白日依山尽，黄河入海流。
欲穷千里目，更上一层楼。




望岳
杜甫
岱宗夫如何，齐鲁青未了。
造化钟神秀，阴阳割昏晓。
荡胸生层云，决眦入归鸟。
会当凌绝顶，一览众山小。








我们先来看看人家的全屏背景是怎么做的，
比如魔兽世界的官方网站
http://wow.blizzard.cn/index.html


图片地址是http://blz.nos.netease.com/1/promos/promos-20170926.jpg


我们发现我们用浏览器的放大和缩小（ctrl+"+"或者"-"）
完全不影响他的背景大小






下面是css代码


<style type="text/css">
body{
background-image: url(http://blz.nos.netease.com/1/promos/promos-20170926.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
</style>




1.图片地址
2.attachment,这个就是当页面滚动的时候,背景固定不动
3.repeat,这个就是图片大小不够的时候,不重复
4.size:cover,背景图像扩展至足够大，以使背景图像完全覆盖背景区域