1.背景颜色 background-color:red
- 任何一个标签都可以设置背景颜色,背景颜色和我们的color的取值一样, 可以是
- 具体的单词
background-color: red; - rgb
background-color: rgb(0,255,0); - rgba
background-color: rgba(0,255,255,1); - 十六进制
background-color: #ff0;
coderYJ
2.背景图片 background-imgage:url('coderYJ')
- 任何一个标签都可以设置背景图片
- 背景图片可以是本地的,也可以是网络上的资源(url)
- 背景图片不能撑起盒子的高度
- 如果背景图片的尺寸比盒子尺寸小,默认会平铺
- 背景图片会再次发送网络请求
3.背景图片平铺 background-repeat: repeat
- 1.专门控制背景图片的平铺方式的
- 2.取值
- repeat (默认): 平铺
- no-repeat 水平和垂直方向上都不平铺
- repeat-x 只在水平方向上平铺
- repeat-y 只在垂直方向上平铺
- 3.应用场景
- 如果图片有规律可以利用平铺的特性截取一张小的图片,拼接成一个大的图片
4.背景定位
1.专门专门控制图片在盒子里面的位置 这个条件必须是
no-repeat2.取值: 可以是方位(英文单词) left right top bottom
-
3.可以是像素 10px 20px ...
ps:一定要写单位
-
4.应用场景
- 适配浏览器分辨率的大小
- 做一些特效
