1
属性介绍
background 是简写属性,在一个声明中设置所有的背景属性
<1>background-color: 规定要使用的背景颜色;
<2>background-position: 规定背景图像的位置;
<3> background-size:规定背景图片的尺寸;
<4> background-repeat:规定如何重复背景图像;
<5> background-image:把图像设置为背景;
1
background-repeat
background-repeat 属性用于设置背景图片的平铺方向
参数参照表
| repeat | 默认,背景图像在垂直和水平方向重复 |
| repeat-x | 背景图片在水平方向上重复 |
| repeat-y | 背景图片在垂直方向上重复 |
| no-repeat | 背景图片将仅显示一次 |
例1
.logo{width:98%;
height:100px;
backgroud-image:url('images/logo.png');/*给容器设置背景图片 url:为图片的路径*/
background-repeat:repeat-x;/*设置背景图片的平铺方向为水平平铺*/
}
例2
.logo{width:30%;
height:294px;
backgroud-image:url('images/logo.png');/*给容器设置背景图片 url:为图片的路径*/
background-repeat:repeat-y;/*设置背景图片的平铺方向为垂直平铺*/
}
例3
.logo{width:30%;
height:294px;
backgroud-image:url('images/logo.png');/*给容器设置背景图片 url:为图片的路径*/
background-repeat:no-repeat;/*禁止背景图片平铺*/
}
1
background-position
background-position: 规定背景图像的位置
例1
.logo{
background-position:20px 30px;/*背景图片水平向右移动20像素,然后垂直向下移动30像素*/
}
例2
.logo{
background-position:20% 30%;/*背景图片水平向右移动父类宽度的20%,然后向下移动父类高度的30%*/
}
例3
.logo{
background-position:left top/*水平方向居左,垂直方向居上*/
background-position:right top/*水平方向居右,垂直方向居上*/
background-position:left bottom/*水平方向居左,垂直方向居下*/
background-position:right bottom/*水平方向居右,垂直方向居下*/
background-position:left center/*水平方向居左,垂直方向居中*/
background-position:right center/*水平方向居右,垂直方向居中*/
}