【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★

/* 设置元素背景色为浅灰色 */
.element {
  background-color: lightgray;
}
 
/* 设置元素背景图片，并确保背景图片不平铺 */
.element-no-repeat {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
}
 
/* 设置元素背景图片，并确保背景图片横向平铺 */
.element-repeat-x {
  background-image: url('image.jpg');
  background-repeat: repeat-x;
}
 
/* 设置元素背景图片，并确保背景图片纵向平铺 */
.element-repeat-y {
  background-image: url('image.jpg');
  background-repeat: repeat-y;
}
 
/* 设置元素背景图片，并确保背景图片完全平铺 */
.element-repeat-all {
  background-image: url('image.jpg');
  background-repeat: repeat;
}
 
/* 设置元素背景图片，并确保背景图片居中且不平铺 */
.element-center-no-repeat {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
}
 
/* 设置元素背景图片，并确保背景图片覆盖整个容器 */
.element-cover {
  background-image: url('image.jpg');
  background-size: cover;
}
 
/* 设置元素背景图片，并确保背景图片的宽度和高度完全匹配容器 */
.element-contain {
  background-image: url('image.jpg');
  background-size: contain;
}

以上代码示例展示了如何使用CSS设置元素的背景色、背景图片、背景图片的平铺样式，以及如何调整背景图片的位置和尺寸。这些是日常布局中常用的CSS属性，对于前端开发者来说，掌握它们是必不可少的。