跳到主要内容

背景

背景有哪些成分属性？​

  • 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; /* 透明 */
}

多张背景图片的层叠次序如何？​

  • 先声明的图片位于上层;
  • 后声明的图片依次叠在下方;
.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
}

background-repeat 如何控制平铺？​

.one {
  background-repeat: no-repeat; /* 不重复 */
  background-repeat: repeat; /* 尽可能多重复, 裁剪 */
  background-repeat: repeat-x; /* 等效 repeat no-repeat */
  background-repeat: space; /* 重复且空白填充, 不裁剪 */
  background-repeat: round; /* 重复且拉伸填充, 不裁剪 */
}
  • 多值: 1 值对应两轴, 2 值按 x + y;

background-size 如何控制图片大小？​

.tiledBackground {
  background-size: 150px;
  background-size: auto;
  background-size: contain; /* 保持纵横比, 空白平铺 */
  background-size: cover; /* 保持纵横比, 多余部分裁剪 */
}
  • 多值: 1 值设 width, height 为 auto; 2 值按 width + height;

background-position 与 background-attachment 如何设置？​

  • background-position: 设置图片位置, 语法同 position 值类型, 见 颜色图像与位置类型;
  • background-attachment: 图片相对视口或元素滚动;
p {
  background-attachment: fixed; /* 相对浏览器页面固定 */
  background-attachment: local; /* 相对元素内容固定 */
  background-attachment: scroll; /* 相对父元素固定 */
}