【Web前端开发基础】CSS之背景相关属性

1. 背景相关属性

目标：能够使用背景相关属性装饰元素的背景样式

1.1 背景颜色

• 属性名：background-color（bgc)

• 属性值：① 关键词 ② rgb表示法 ③ rgba表示法 ④ 十六进制表示法

• 注意点：

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

  

1.2 背景图片

• 属性名：background-image（bgi）

• 属性值：url(“图片的路径”)

• 注意点：

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

  

1.3 背景平铺

• 属性名：background-repeat（bgr）

• 属性值：

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

  

1.4 背景位置

• 属性名：background-position（bgp）

• 属性值：background-position: 水平方向位置 垂直方向位置;

  

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

  ​

1.5 背景属性的连写

• 属性名：background
• 属性值：单个属性值的合写，取值之间以空格隔开
• 书写顺序：（推荐）color image repeat position
• 省略问题:
  • 按照你的需求省略
  • 特殊情况：在PC端，如果盒子的大小和图片的背景图片一样大，此时可以直接写background: url(“图片路径”)
• 注意点：
  • 如果需要设置单独的样式和连写
  • 要么把单独的样式写在下面
  • 要么把单独的样式写在连写里面

1.6 img标签和背景图片的区别

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

  方法1：直接写上img标签即可

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

  方法2：div + 背景图片

  • 需要给div设置宽高，因为背景图片只是一个css样式，不是html中的内容，不能撑开div标签