在制作网页时我们往往需要在网页中添加一些背景颜色、背景图像让网页更加美观，吸引访问者的眼球。CSS 中提供了一系列用于设置 HTML 元素背景效果的属性，下面本篇文章就来带大家聊聊CSS 背景属性，希望对大家有所帮助！

CSS 背景属性

• （Background）

1. background 属性: 一次性 集中定义 8个 背景相关属性

• 关键点：
  • 背景 颜色
  • 背景图像 位置
  • 背景图像 尺寸
  • 背景图像 重复
  • 背景图像 定位位置
  • 背景 绘制区域
  • 背景图像 固定和滚动
  • 要使用的 背景图像
  • 继承

<style type="text/css">     body     {      background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;      } </style>

• ⑴ 一个元素 多个背景图像 浏览器支持

  • IE8 以及更早的浏览器 不支持
  • 即 指定对个 背景图像的资源地址

• ⑵ background 属性 “inherit” 浏览器支持

  • IE7 以及更早的浏览器 不支持 “inherit”。
  • IE8 需要!DOCTYPE。
  • IE9 支持 “inherit”。

• ⑶ 在一个声明中，设置 所有的 背景属性。
  • 简写属性+集中定义: 是一种 CSS 简写属性，用于一次性 集中定义 各种背景属性，包括 color, image, origin与 size, repeat 方式等等。【推荐学习：css视频教程】
    • 背景 background 简写属性
    • 背景 属性
    • 包含 其他 8 个 背景属性

• ⑷ 背景background的 属性值
  • 包含 其他 8 个 背景属性
    • ① 可以设置如下 属性和属性值：
      • 多个 属性值之间 空格 隔开
      • 背景层 分隔: 指定 多个背景层 时，使用 逗号分隔 每个背景层
        • 是一种 CSS 简写属性，用于 一次性 集中定义 各种背景属性，包括color, image, origin 与 size, repeat 方式等等。(每个属性的意思,可以先学习完后面的内容 就能理解了)
          • background-color
          • background-position
          • background-size
          • background-repeat
          • background-origin
          • background-clip
          • background-attachment
          • background-image
          • inherit
            • 继承
    • ② 背景background的 属性值省略
      • 如果不设置 其中的某个值，也不会出问题
      • 比如 background:#ff0000 url('smiley.gif');也是允许的。
    • ③ 背景简写 默认值
      • 没有指定 具体默认值
      • not specified
      • 对于所有简写属性，任何 没有被指定的值 都会被设定为它们的 初始值。

• ⑸ 每个 背景层的语法
  • 在每一层中，下列的值 可以出现 0 次或 1 次：
    • 每个背景层, 最多只能 出现一次的属性
      • ① 背景图像的 固定和滚动: background-attachment
      • ② 背景图像: background-image
      • ③ 背景图像 位置: background-position
      • ④ background-size
      • ⑤ 背景图像 重复方式: background-repeat

• ⑹ 限定的 代码位置
  • ① background-size 的 代码位置
    • background-size 只能 紧跟在 背景位置 background-position 后面出现，以"/"分割
      • 如： “center/80%”.
  • ② background-clip 和 background-origin 可能 出现的次数
    • 0 次、1 次或 2 次(最多两次)
      • 如果 出现 1 次:
        • 它 同时设定 background-origin 和 background-clip。
      • 如果 出现 2 次:
        • 第一次的出现 设置 background-origin，第二次的出现 设置 background-clip。
  • ③ 背景颜色 background-color的 代码位置
    • 只能被包含在 最后的背景层中。
    • 只能在background的 最后 一个属性上 定义，因为 整个元素 只有一种 背景颜色。

• ⑺ 背景background 的继承性

  • 不继承
  • no

• ⑻ 尽量使用 背景background属性

  • 设置背景 技巧: 建议使用 简写属性，而不是使用 单个属性
  • 旧浏览器的支持好: 这个简写属性, 在较老的浏览器中能够得到 更好的支持
  • 代码少: 需要键入的 字母也更少。

• ⑼ 背景简写background的版本

  • CSS1 + CSS3

• ⑽ 背景简写background 的JavaScript 语法

  • object.style.background="white url(paper.gif) repeat-y"

• ⑾ 背景简写background的 浏览器支持

• 示例1: 背景相关的属性 在一个属性background中 集中定义.

p{   /*background-image: url(../images/四叶草背景.png);*/  /*background-repeat: no-repeat;*/    /*第一个值 水平位置,第二个值 垂直位置*/  /*background-position: 50px 100px; */       /*背景固定*/  /*background-attachment: fixed;*/  /*background-color: yellow; */   background: url(../images/四叶草背景.png) no-repeat 50px 100px;  }