背景

成分属性

• background-attachment 属性；
• background-clip 属性；
• background-color 属性；
• background-image 属性；
• background-origin 属性；
• background-position 属性；
• background-repeat 属性；
• background-size 属性；

背景颜色

• background-color 属性；
• 设置背景颜色；

.exampletwo {
  background-color: rgb(153, 102, 153);
  /* 透明颜色 */
  background-color: transparent;
  color: rgb(255, 255, 204);
}

背景图片

背景图片

• background-image 属性；
• 设置背景图片，通过 url 引用图片；
  • 多张背景图片 ，分隔；

.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}

图片次序机制

• 先定义的在前面；
• 依次向下叠加；

图片排列

图片排列

• background-repeat 属性；
• 背景图片重复排列；
• 多张背景图片 ，分隔；

.one {
  /* 不重复 */
  background-repeat: no-repeat;
  /* 尽可能多的重复, 裁剪 */
  background-repeat: repeat;
  /* 等效于 repeat no-repeat */
  background-repeat: repeat-x;
  /* 等效于 no-repeat repeat*/
  background-repeat: repeat-y;
  /* 尽可能多的重复, 不会裁剪, 空白填充 */
  background-repeat: space;
  /* 尽可能多的重复, 不会裁剪, 拉伸填充 */
  background-repeat: round;
}
.three {
  background-repeat: repeat space;
}

多值语法

• 1 value：对应属性值；
• 2 value：x + y；

图片大小

图片大小

• background-size 属性；
• 调整背景图片大小；
• 多张背景图片 ，分隔；

.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  background-size: auto;
  /* 保持纵横比, 空白平铺 */
  background-size: contain;
  /* 保持纵横比, 多余部分裁剪 */
  background-size: cover;
}

多值语法

• 1 value：width，height 为 auto；
• 2 value：width + height；

图片位置

图片位置

• background-position 属性；
• 设置背景图片位置；
• 多张背景图片 ，分隔；

.examplethree {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-position: 0px 0px, right 3em bottom 2em;
}

默认值

• left top；

多值语法

• 同 position 属性；

图片视图位置

• background-attachment 属性；
• 设置背景图片相对于视图的位置；
• 多张背景图片 ，分隔；

p {
  background-image: url("starsolid.gif");
  /* 相对于浏览器页面固定不动 */
  background-attachment: fixed;
  /* 相对于元素内容固定不动 */
  background-attachment: local;
  /* 相对于父元素固定不动 */
  background-attachment: scroll;
}