CSS背景相关属性

1. 背景颜色

   属性名：

   background-color（bgc）

   属性值：

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

   注意点：

   背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
   背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

2. 背景图片

   属性名：

   background-image（bgi）

   属性值：

   background-image: url('图片的路径')

   注意点：

   • 背景图片中url中可以省略引号
   • 背景图片默认是在水平和垂直方向平铺的
   • 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3. 背景平铺

   属性名：

   background-repeat（bgr）

   属性值：

   取值	效果
   repeat	(默认值)水平和垂直方向都平铺
   no-repeat	不平铺
   repeat-x	沿着水平方向(x轴)平铺
   repeat-y	沿着垂直方向(y轴)平铺

4. 背景位置

   属性名：

   background-position（bgp）

   属性值：

   background-position: 水平方向位置, 垂直方向位置;

注意点：

方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

5. 背景相关属性的连写形式

   属性名：

   background（bg）

   属性值：

   单个属性值的合写，取值之间以空格隔开

   书写顺序：

   推荐：background：color image repeat position

   省略问题：

   可以按照需求省略
   特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()

   注意点

   • 如果需要设置单独的样式和连写
   • ① 要么把单独的样式写在连写的下面
   • ② 要么把单独的样式写在连写的里面

6. img标签和背景图片的区别

   需求：需要在网页中展示一张图片的效果？

   方法一：

   直接写上img标签即可
   • img标签是一个标签，不设置宽高默认会以原尺寸显示

   方法二：

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