跳到主要内容

背景

成分属性​

  • 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 属性​

  • background-image: 设置背景图片;
  • 多背景图片: 逗号分隔;
.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}

图片次序机制​

  • 先声明图片位于上层;
  • 后声明图片依次叠在下层;

图片排列​

background-repeat 属性​

  • 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 属性​

  • 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 属性​

  • background-position: 设置背景图片位置, 语法同 position 类型;
  • 多背景图片: 逗号分隔;
.examplethree {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-position:
    0px 0px,
    right 3em bottom 2em;
}

图片视图位置​

  • background-attachment: 设置背景图片相对视口或元素滚动;
  • 多背景图片: 逗号分隔;
p {
  background-image: url("starsolid.gif");
  /* 相对于浏览器页面固定不动 */
  background-attachment: fixed;
  /* 相对于元素内容固定不动 */
  background-attachment: local;
  /* 相对于父元素固定不动 */
  background-attachment: scroll;
}