用css设置背景色和背景图片:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color:blue;
background-p_w_picpath:url(F:\ss.jpg);
}
</style>
</head>
<body>
</body>
</html>
设置为背景色是蓝色,然后添加了一张背景图,效果:
默认背景图铺满了整个页面,那么更改一下,让图片向X轴也就是水平方向平铺过去我们加一个属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color:blue;
background-p_w_picpath:url(F:\ss.jpg);
background-repeat:repeat-x;
}
</style>
</head>
<body>
</body>
</html>
出现的是这样的一个效果:
那么我们要让图片纵向平铺怎么办呢,直接将background-repeat:repeat-x;更改成background-repeat:repeat-y;就可以了,来看下效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color:blue;
background-p_w_picpath:url(F:\ss.jpg);
background-repeat:repeat-y;
}
</style>
</head>
<body>
</body>
</html>
那么我们不要让图片平铺只要一张图片怎么办呢,background-repeat:repeat-x;横向平铺background-repeat:repeat-y;纵向平铺那么不平铺就是background-repeat:no-repeat;:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color:blue;
background-p_w_picpath:url(F:\ss.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>
效果:
再来看一个属性background-p_w_upload:fixed;这个属性能让图片固定住:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color:blue;
background-p_w_picpath:url(F:\ss.jpg);
background-repeat:no-repeat;
background-p_w_upload:fixed;
}
</style>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
添加上属性,再用<br />来让页面滚动条出现,这样更能看出效果:
注意右侧滚动条往下拉图片还是在左上角不动
转载于:https://blog.51cto.com/716870410/1557549