一、背景图片设置（常用）
1.背景颜色：backgrond-color
2.背景图片：background-image：url();
3.背景图片水平或垂直平铺：background-repeat 其值为[repeat-x repeat-y no-repeat]
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景设置1</title>
<style>
body{
background-color: aqua;
/*background-image: url(../basketball.jpg);*/
/*background-image: url(ball.png);background-repeat: repeat-y;*/
}
div{
width: 500px;height: 400px;background-image: url(number.png);background-repeat: repeat-y;
}
h1{
color: blue;
}
p{
color: aliceblue;
}
/*body{
color: azure;
}*/
</style>
</head>
<body>
<h1>设置整个背景颜色background-color:</h1>
<h1>设置背景图片</h1>
<h1>background-image：描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.</h1>
<h1>background-repeat：设置背景图像水平或垂直平铺[repeat-x repeat-y no-repeat]</h1>
<div>
<p>测试</p>
</div>
</body>
</html>
4.背景图片滚动：background-attachment 其常用的值有 fixed---不随页面滚动；scroll---随页面滚动，默认是scroll
5.背景图片起始位置设置：background-position 其值为【left top left center left bottom】
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景设置2</title>
<style>
body{
background-image: url(number.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;}
div{width: 50px;height: 40px;position: absolute;top: 700px;}
h1{color: blue;}
p{color: red; }
</style>
</head>
<body>
<h1>background-attachment：设置背景图片随着滚动</h1>
<p>值有：【fixed---背景图片不会随着页面的滚动而滚动。】
【scroll--背景图片随着页面的滚动而滚动，这是默认的。】
</p>
<p>background-position: 属性设置背景图像的起始位置。<br>
值为【left top left center left bottom】
</p>
<div>
<p>测试</p>
</div>
</body>
</html>
扫一扫
1023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
