友情提示

对不起!该功能尚未开放,请浏览其他内容! OK
background属性

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/*水平方向居右,垂直方向居中*/
				}