css3制作背景

CSS3 制作背景的方法

线性渐变背景
使用 linear-gradient 可以创建线性渐变背景，语法如下：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

示例：

div {
  background: linear-gradient(to right, #ff9966, #ff5e62);
}

direction 可以是角度（如 90deg）或方向关键词（如 to right）。

径向渐变背景
通过 radial-gradient 创建圆形或椭圆形渐变：

background: radial-gradient(shape size at position, color-stop1, color-stop2);

示例：

div {
  background: radial-gradient(circle at center, #4facfe, #00f2fe);
}

shape 可选 circle 或 ellipse，position 指定中心点（如 at top left）。

多背景图层
CSS3 支持叠加多个背景，用逗号分隔：

div {
  background: 
    url('image1.png') top left no-repeat,
    linear-gradient(to bottom, #fff, #000);
}

背景大小与裁剪
background-size 控制背景尺寸：

div {
  background-size: cover; /* 覆盖整个元素 */
  /* 或 */
  background-size: 50% 100%; /* 自定义宽高 */
}

background-clip 定义绘制区域：

div {
  background-clip: padding-box; /* 仅在内边距区域显示 */
}

背景动画
结合 @keyframes 实现动态背景：

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
div {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}

透明与混合模式
使用 rgba 或 hsla 设置透明色：

div {
  background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

background-blend-mode 控制背景混合：

div {
  background: 
    url('texture.png'),
    linear-gradient(#ff4d4d, #f9cb28);
  background-blend-mode: multiply;
}

图案背景
通过重复的小元素创建图案：

div {
  background: 
    repeating-linear-gradient(
      45deg,
      #606dbc,
      #606dbc 10px,
      #465298 10px,
      #465298 20px
    );
}