background属性

2015/4/17 10:28:34 人评论 次浏览 分类:数据类型

属性介绍


background 是简写属性,在一个声明中设置所有的背景属性

<1>background-color: 规定要使用的背景颜色;

<2>background-position: 规定背景图像的位置;

<3> background-size:规定背景图片的尺寸;

<4> background-repeat:规定如何重复背景图像;

<5> background-image:把图像设置为背景;

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;/*禁止背景图片平铺*/
}
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/*水平方向居右,垂直方向居中*/
}


共有访客发表了评论 网友评论

验证码: 看不清楚?