- 使用<body>标签
- 使用一般标签进行拓展至整个页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="zzz.css">
<title>测试BG</title>
</head>
<body>
<bg>叮~</bg>
</body>
</html>
bg{
background:url('http://i1.fuimg.com/669018/f5f31f78611f63ea.jpg' )no-repeat center;
/*使用百分比在放大缩小窗口大小时会变形
background-size:100% 100%;
*/
/*cover填充完全覆盖页面大小(保持长宽比)*/
background-size:cover;
/*contain填充页面大小(保持长宽比)
background-size:contain;
*/
/*背景图片是固定的*/
background-attachment:fixed;
/*生成固定定位的元素,相对于浏览器窗口进行定位。*/
/*top和left取消元素的不贴边问题*/
position:fixed;
top:0;
left:0;
/*拓展本标签至全页面(与body的差别)*/
width:100%;
height:100%;
/*z-index设置元素的堆叠顺序(依据z轴,取负值表示处于底层)*/
z-index:-10;
}
body{
/*贴图库免费图片外链*/
background:url('http://i1.fuimg.com/691770/f5f31f78611f63ea.jpg' )no-repeat center;
/*使用百分比在放大缩小窗口大小时会变形
background-size:100% 100%;
*/
/*cover填充完全覆盖页面大小(保持长宽比)*/
background-size:cover;
/*contain填充页面大小(保持长宽比)
background-size:contain;
*/
/*背景图片是固定的*/
background-attachment:fixed;
/*生成固定定位的元素,相对于浏览器窗口进行定位。*/
/*top和left取消元素的不贴边问题*/
position:fixed;
top:0;
left:0;
/*z-index设置元素的堆叠顺序(依据z轴,取负值表示处于底层)*/
z-index:-10;
}