一、背景颜色和属性
背景颜色和属性包含以下内容:
1、background-color:背景颜色,可以针对布局标签以及整个body进行颜色控制,改变背景颜色,而css中的color则是控制文字的颜色
2、background-image:背景图片,参数为url(),在括号中指定image所在的路径,在图片大小比区块大小小时,image会自动填充
注意:background-image与img的区别:
1、background-image可以设置背景图片,可以在背景图片的基础上进行操作,例如添加文字等
2、img不能在图片上面进行任何操作
以下是实例:
<!DOCTYPE html>
<html>
<head>
<title>背景颜色与背景图片</title>
<style type="text/css">
/*background-color:控制背景颜色,可以控制布局标签也可以控制body*/
/*改变body背景颜色*/
body{background-color: #FCFCFC}
/*改变布局标签背景颜色*/
.box{background-color: #ccc; width: 200px; height: 100px;}
/*背景颜色与文字颜色同时控制*/
.box1{background-color: #ccc; width: 300px; height: 200px; color:red;}
/*background-image:设置背景图像,参数为url,在括号中输入图片路径*/
.img{background-image: url(images/bkg.jpg); width: 350px; height: 200px; color:white;}
</style>
</head>
<body>
<div class="box">这是一个区块</div>
<div class="box1">背景颜色与文字颜色同时控制</div>
<div class="img">这是背景图像</div>
</body>
</html>
二、背景图片重复与偏移
在使用background-image时,背景图片会重复填充
1、background-repeat:背景重复
-repeat:背景图像在纵向和横向上平铺(填充)-默认
-no-repeat:背景图像不平铺
-repeat-x:背景图像在横向上(水平方向)平铺
-repeat-y:背景图像在纵向上(垂直方向)平铺
以下是实例:
<!DOCTYPE html>
<html>
<head>
<title>背景重复</title>
<style type="text/css">
/*background-repeat:背景重复*/
/*-repeat:默认值,图像水平垂直方向上进行平铺*/
.bkg{width: 500px;height: 400px;background-image: url(images/bkg.jpg); background-repeat: repeat;}
/*-no-repeat:不平铺*/
.bkg1{width: 500px;height: 400px;background-image: url(images/bkg.jpg); background-repeat: no-repeat;}
/*repeat-x:水平方向平铺*/
.bkg2{width: 500px;height: 400px;background-image: url(images/bkg.jpg); background-repeat: repeat-x;}
/*repeat-y:垂直方向平铺*/
.bkg3{width: 500px;height: 400px;background-image: url(images/bkg.jpg); background-repeat: repeat-y;}
/*背景img与背景颜色同时使用,但是为repeat时看不到背景颜色*/
.bkg3{width: 500px;
height: 400px;
background-image: url(images/bkg.jpg);
background-repeat: no-repeat;
background-color: #ccc}
</style>
</head>
<body>
<div class="bkg">腾讯视频</div>
<hr>
<div class="bkg1">腾讯视频</div>
<hr>
<div class="bkg2">腾讯视频</div>
<hr>
<div class="bkg3">腾讯视频</div>
<hr>
<div class="bkg4">百度一下</div>
</body>
</html>
2、background-position:背景定位
background-position:x y,x表示x轴(水平轴)上的偏移,y表示y轴(垂直轴)上的偏移
2.1、x轴可以使用left、center、right或精确数值
2.2、y轴可以使用top、center、bottom或精确数值
2.3、x轴可以给精确数值,数值为正则向右偏移,数值为负向左偏移
2.4、y轴可以给精确数值,数值为正则向下偏移,数值为负向上偏移
<!DOCTYPE html>
<html>
<head>
<title>背景图片偏移</title>
<style type="text/css">
/*background-position:背景图片偏移*/
/*向右下方偏移*/
.box{width: 300px;
height: 300px;
background-color: #ccc;
background-repeat: no-repeat;
background-image: url(images/bkg2.jpg);
background-position: right bottom;}
/*向中下方偏移*/
.box2{width: 300px;
height: 300px;
background-color: #ccc;
background-repeat: no-repeat;
background-image: url(images/bkg2.jpg);
background-position: center bottom;}
/*正中偏移*/
.box3{width: 300px;
height: 300px;
background-color: #ccc;
background-repeat: no-repeat;
background-image: url(images/bkg2.jpg);
background-position: center center;}
/*数值偏移*/
.box4{width: 300px;
height: 300px;
background-color: #ccc;
background-repeat: no-repeat;
background-image: url(images/bkg2.jpg);
background-position: 20px 50px;}
/*负数值偏移*/
.box5{width: 300px;
height: 300px;
background-color: #ccc;
background-repeat: no-repeat;
background-image: url(images/bkg2.jpg);
background-position: -20px -50px;}
</style>
</head>
<body>
<div class="box">百度一下</div>
<hr>
<div class="box2">腾讯视频</div>
<hr>
<div class="box3">京东商城</div>
<hr>
<div class="box4">百度地图</div>
<hr>
<div class="box5">wolala</div>
</body>
</html>
三、设置背景图像的固定
1、background-attachment:背景固定
-scroll 默认值,背景图像会随着页面其余部分的滚动而移动
-fixed 当页面的其余部分滚动时,背景图像不会移动
注意:background-attachment不仅对body背景可以固定,同时也可以对标签进行固定
以下是实例:(显示自己可以看效果)
<!DOCTYPE html>
<html>
<head>
<title>背景固定</title>
<style type="text/css">
/*background-attachment背景固定*/
/*-scroll 默认值,背景图像会随着页面其余部分的滚动而移动
-fixed 当页面的其余部分滚动时,背景图像不会移动*/
/*设置背景为居中顶对齐并去掉重复,背景固定*/
body{background-image: url(images/body_bkg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-attachment: 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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>背景固定2</title>
<style type="text/css">
/*针对其他元素的背景图片也可以使用背景固定*/
.box1{height: 1000px;
background-color: #ccc;}
.box2{height:800px;
background-image: url(images/body_bkg.jpg);
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;}
.box3{height: 500px;
background-color: #ccc;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
四、背景代码简写
1、背景代码简写规则
背景代码的简写规则:background:颜色 路径 重复 偏移 固定,分别对应了color、url()、repeat、position以及attachment,位置可以互换,中间以空格分隔
2、background简写
2.1、单个background属性控制,则可以写成background:单个属性;(color、url()、repeat、center center、fixed)
2.2、多个background属性控制,则可以写成background:#ccc url(images/aaa.jpg) no-repeat right center fixed,中间需要空格隔开;
2.3、background属性可以互换位置,不影响显示效果,偏移的两个值是必须在一起的,不可分开
以下是实例:
<!DOCTYPE html>
<html>
<head>
<title>背景简写</title>
<style type="text/css">
/*background:单个属性设定简写*/
.box1{width: 500px;
height:500px;
background: #ccc;}
/*background:多个属性设定简写*/
.box2{width: 500px;
height: 500px;
background: #ccc url(images/bkg2.jpg) no-repeat center center;}
/*background在设定鼠标移入时的效果,如果不是所有属性修改,而是针对某一个属性进行修改,则需要写明background属性参数*/
.box2:hover{background-color: blue;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>