css背景

CSS背景

背景颜色

background-color(bgc)

div {
	background-color: pink;
}

颜色取值可以用：关键字、rgb表示法、rgba表示法、十六进制…

背景图片

background-image(bgi)

div {
	background-image: url('图片的路径');
}

①背景图片中url可以省略引号。

②背景图片默认是在水平和垂直方向平铺的。

③背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色。

背景平铺

background-repeat(bgr)

div{
	background-repeat:no-repeat;
}

repeat (默认值)水平和垂直方向都平铺

no-repeat 不平铺

repeat-x 沿着水平方向(x轴)平铺

repeat-y 沿着垂直方向(y轴)平铺

背景位置

background-position(bgp)

div{
	background-position:
}

方位名词

水平方向

left、center、right

垂直方向

top、center、bottom

div{
	background-position: right bottom; //水平位置 垂直位置
}

数字+px

坐标轴

①原点(0,0) 盒子左上角

②x轴 水平向右

③y轴 垂直向下

操作

将图片左上角与坐标点重合即可

div{
	background-position: 50px 100px; //水平位置 垂直位置
}

背景相关属性连写

background: color image repeat position

可以不按顺序写。

div{
	background: pink url(./images/1.jpg) no-repeat bottom center ;
}

与img的区别

①img标签是一个标签，不设置宽高默认会以原尺寸显示。

②div标签需要设置div的宽高，因为背景图片只是装饰的css样式，不能撑开div标签。