当前位置：首页 > CSS

如何制作css背景

2026-02-13 08:14:51CSS

使用纯色背景

通过background-color属性设置纯色背景。颜色可用十六进制、RGB或颜色名称表示。

body {
  background-color: #f0f0f0; /* 浅灰色 */
}

添加渐变背景

使用linear-gradient或radial-gradient创建渐变效果。

div {
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* 水平橙粉色渐变 */
}

设置图片背景

通过background-image引入图片，并控制其显示方式。

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

多背景图层叠加

用逗号分隔多个背景定义，实现叠加效果。

header {
  background: 
    url("pattern.png") repeat,
    linear-gradient(to bottom, #ffffff80, #00000080);
}

固定背景滚动

background-attachment控制背景是否随页面滚动。

main {
  background-image: url("texture.png");
  background-attachment: fixed; /* 背景固定 */
}

动态背景动画

结合CSS动画让背景产生动态效果。

如何制作css背景

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

.animated-bg {
  background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}