当前位置：首页 > CSS

css制作背景

2026-02-12 20:31:06CSS

使用纯色背景

通过 background-color 属性设置纯色背景，支持颜色名称、十六进制、RGB 或 HSL 值：

body {
  background-color: #f0f0f0; /* 十六进制 */
  background-color: rgb(240, 240, 240); /* RGB */
  background-color: hsl(0, 0%, 94%); /* HSL */
}

使用渐变背景

通过 linear-gradient 或 radial-gradient 创建线性或径向渐变：

div {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4); /* 线性渐变 */
  background: radial-gradient(circle, #a1c4fd, #c2e9fb); /* 径向渐变 */
}

使用图片背景

通过 background-image 添加图片，配合 background-size 和 background-repeat 控制显示：

section {
  background-image: url("image.jpg");
  background-size: cover; /* 覆盖整个区域 */
  background-repeat: no-repeat; /* 禁止重复 */
  background-position: center; /* 居中显示 */
}

多背景图层叠加

使用逗号分隔多个背景属性实现叠加效果：

.hero {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("hero-image.jpg") center/cover no-repeat;
}

动态背景效果

结合 CSS 动画或过渡实现动态背景：

css制作背景

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-bg {
  background: linear-gradient(270deg, #ff758c, #ff7eb3, #ff8e7f);
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}