CSS【详解】背景 background （含背景图片/渐变 background-image，背景定位 background-position，背景尺寸 background-size等）

作者：System 时间：2024年08月09日分类：所有,css 字数：742

CSS背景属性包括背景颜色、背景图片、背景重复、背景定位、背景尺寸和背景渐变等。




.element {
  background-color: #ff0000; /* 红色背景 */
}




.element {
  background-image: url('image.jpg'); /* 设置背景图片 */
}




.element {
  background-repeat: no-repeat; /* 背景图片不重复 */
}




.element {
  background-position: center center; /* 背景图片居中 */
}




.element {
  background-size: cover; /* 背景图片覆盖整个容器 */
}

线性渐变：




.element {
  background-image: linear-gradient(to right, red , blue); /* 从左到右的红到蓝渐变 */
}

径向渐变：




.element {
  background-image: radial-gradient(circle, red, blue); /* 圆形的红到蓝径向渐变 */
}

以上是背景属性的一些基本用法，实际使用时可以根据需要组合这些属性。