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,背景图像扩展至足够大,以使背景图像完全覆盖背景区域