CSS背景样式基础用法
css背景类样式
1、背景图片
backgroung-color:url(图片地址);
2、背景图片重复
background-repeat：repeat-x/repeat-y/no-repeat;只在x方向重复显示、只在y方向重复显示、不重复，只显示一次。
3、背景图片布局
background-position
取值：两个，分别表示x,y方向，如果只写一个，则两个值相等。
例子：
css/day03.css css文件
/*03start*/
.d03_01{
width: 700px;
height: 700px;
font-size: 50px;
/*background-color: #f00;*/
background-image: url(../images/pig.jpg);
background-repeat: no-repeat;
background-position: top center;
}
.d03_bgimg{
background-image: url(../images/sprite.jpg);
}
.d03_02{
width: 78px;
height: 16px;
background-position: -484px -45px;
}
.d03_03{
width: 62.5px;
height: 16px;
background-position: -484px -45px;
}
.d03_04{
width: 47px;
height: 16px;
background-position: -484px -45px;
}
.d03_05{
width: 32px;
height: 16px;
background-position: -484px -45px;
}
.d03_06{
width: 16px;
height: 16px;
background-position: -484px -45px;
}
.d03_07{
width: 84px;
height: 26px;
background-position: -390px 0px;
}
.d03_08{
width: 84px;
height: 26px;
background-position: -390px -184px;
}
.d03_09{
width: 20px;
height: 18px;
background-position: -89px -184px;
}
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景类样式</title>
<link rel="stylesheet" href="css/day03.css" />
</head>
<body>
<!--
今天任务:
1.css背景类样式
2.框模型
3.css布局
-->
<!--
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片的重复
repeat-y 只允许在y轴重复
repeat-x 只允许在x轴重复
no-repeat 不重复，只显示一次
background-position 背景图片的定位
取值： 两个，分别表示x和y方向。如果只写一个，则两个值相等
例如：京东、淘宝 五星好评
雪碧图： 各个小图标的集合，使用的目的是减少http的请求
-->
<div class="d03_01">
随便一段文字安防类似飞机来说大家发了时代峻峰老实交代法律手段见风使舵浪费
</div>
五星好评
<div class="d03_bgimg d03_02"></div>
四星
<div class="d03_bgimg d03_03"></div>
三星
<div class="d03_bgimg d03_04"></div>
两星
<div class="d03_bgimg d03_05"></div>
一星
<div class="d03_bgimg d03_06"></div>
微博达人
<div class="d03_bgimg d03_07"></div>
微博女郎
<div class="d03_bgimg d03_08"></div>
红包
<div class="d03_bgimg d03_09"></div>
</body>
</html>
