背景属性

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-repeat

• 2.取值: 可以是方位(英文单词) left right top bottom

• 3.可以是像素 10px 20px ...

  ps:一定要写单位

• 4.应用场景

  • 适配浏览器分辨率的大小
  • 做一些特效