CSS3学习教程，从入门到精通，CSS3 背景样式语法知识点及案例代码（11）

本文链接：https://blog.youkuaiyun.com/qq_45746668/article/details/146379864

CSS3 背景样式语法知识点及案例代码

一、背景颜色（background-color）

/* 设置元素的背景颜色 */
selector {
  background-color: color-value;
}

selector：选择器，指定要设置背景颜色的元素。
color-value：颜色值，可以是颜色名称、十六进制颜色代码、RGB颜色值或 HSL颜色值等。

案例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      /* 设置背景颜色为浅蓝色 */
      background-color: #e6f2ff;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

二、背景图像（background-image）

/* 设置元素的背景图像 */
selector {
  background-image: image-value;
}

selector：选择器，指定要设置背景图像的元素。
image-value：图像值，通常使用url()函数指定图像路径，也可以使用none表示没有背景图像。

案例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      /* 设置背景图像为"bg.jpg" */
      background-image: url("bg.jpg");
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

三、背景重复（background-repeat）

/* 设置背景图像的重复方式 */
selector {
  background-repeat: repeat-value;
}

selector：选择器，指定要设置背景重复方式的元素。
repeat-value：重复方式，可选值有repeat（默认，图像在水平和垂直方向重复）、no-repeat（图像不重复）、repeat-x（图像在水平方向重复）、repeat-y（图像在垂直方向重复）。

案例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-image: url("bg.jpg");
      /* 设置背景图像在水平方向重复 */
      background-repeat: repeat-x;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

四、背景大小（background-size）

/* 设置背景图像的大小 */
selector {
  background-size: size-value;
}

selector：选择器，指定要设置背景大小的元素。
size-value：大小值，可以是具体的长度（如100px 200px）或百分比（如50% 100%），也可以使用cover（图像按比例缩放以完全覆盖元素）或contain（图像按比例缩放以完全包含在元素内）。

案例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-image: url("bg.jpg");
      /* 设置背景图像大小为覆盖整个元素 */
      background-size: cover;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

五、背景位置（background-position）

/* 设置背景图像的位置 */
selector {
  background-position: position-value;
}

selector：选择器，指定要设置背景位置的元素。
position-value：位置值，可以是具体的坐标（如10px 20px），也可以是关键字（如top、bottom、left、right、center）。

案例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-image: url("bg.jpg");
      /* 设置背景图像位置为右上角 */
      background-position: right top;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

六、背景附件（background-attachment）

/* 设置背景图像的滚动方式 */
selector {
  background-attachment: attachment-value;
}

selector：选择器，指定要设置背景附件的元素。
attachment-value：附件值，可选值有scroll（默认，背景图像随页面滚动）、fixed（背景图像固定，不随页面滚动）。

案例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-image: url("bg.jpg");
      /* 设置背景图像固定 */
      background-attachment: fixed;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

七、背景原点（background-origin）

/* 设置背景图像的起始位置 */
selector {
  background-origin: origin-value;
}

selector：选择器，指定要设置背景原点的元素。
origin-value：原点值，可选值有padding-box（默认，背景图像从内边距区域开始）、border-box（背景图像从边框区域开始）、content-box（背景图像从内容区域开始）。

案例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      padding: 20px;
      border: 5px solid black;
      background-image: url("bg.jpg");
      /* 设置背景图像从内容区域开始 */
      background-origin: content-box;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

八、背景复合属性（background）

/* 设置元素的背景样式 */
selector {
  background: background-value;
}

selector：选择器，指定要设置背景样式的元素。
background-value：背景值，可以是background-color、background-image、background-repeat、background-attachment、background-position等属性的值的组合，用空格分隔。

案例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      /* 设置背景样式，包括颜色、图像、重复方式、附件方式和位置 */
      background: #e6f2ff url("bg.jpg") no-repeat fixed center;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

九、多背景（Multiple Backgrounds）

/* 设置元素的多背景 */
selector {
  background-image: image1, image2, ..., imagen;
  background-repeat: repeat1, repeat2, ..., repeatn;
  background-position: position1, position2, ..., positionn;
  /* 其他背景属性也可以类似设置 */
}

selector：选择器，指定要设置多背景的元素。
image1, image2, ..., imagen：多个背景图像，用逗号分隔。
repeat1, repeat2, ..., repeatn：对应背景图像的重复方式，用逗号分隔。
position1, position2, ..., positionn：对应背景图像的位置，用逗号分隔。

案例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px;
      height: 200px;
      /* 设置多背景，包括两个图像 */
      background-image: url("bg1.jpg"), url("bg2.jpg");
      /* 设置对应背景图像的重复方式 */
      background-repeat: no-repeat, repeat;
      /* 设置对应背景图像的位置 */
      background-position: left top, right bottom;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

以下是实际开发中一些常见的CSS3背景样式案例，涵盖了背景颜色、背景图像、多背景等知识点：

案例一：网页头部大图背景

<!DOCTYPE html>
<html>
<head>
  <style>
    .header {
      height: 500px;
      background-image: url("header-bg.jpg");
      background-color: #e6e6e6; /* 设置背景颜色作为图像加载失败的替代 */
      background-size: cover; /* 图像按比例缩放以覆盖整个元素 */
      background-position: center; /* 图像居中显示 */
      background-repeat: no-repeat; /* 图像不重复 */
    }
  </style>
</head>
<body>
  <div class="header"></div>
</body>
</html>

说明： 此案例常用于网页的头部区域，展示一张全屏的大图背景，增强视觉冲击力。

案例二：按钮的渐变背景

<!DOCTYPE html>
<html>
<head>
  <style>
    .btn {
      padding: 15px 30px;
      background-color: #4CAF50; /* 默认背景颜色 */
      background-image: linear-gradient(to right, #4CAF50, #8BC34A); /* 渐变背景 */
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .btn:hover {
      background-image: linear-gradient(to right, #8BC34A, #4CAF50); /* 鼠标悬停时渐变方向反转 */
    }
  </style>
</head>
<body>
  <button class="btn">点击我</button>
</body>
</html>

说明： 利用渐变背景提升按钮的视觉效果，增加交互体验。

案例三：多背景实现复杂视觉效果

<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      width: 300px;
      height: 200px;
      background-image: 
        url("icon.png"), /* 图标 */
        linear-gradient(to bottom, #ffffff, #f2f2f2); /* 渐变背景 */
      background-repeat: no-repeat, repeat; /* 第一个背景不重复，第二个背景重复 */
      background-position: 10px 10px, center; /* 第一个背景定位在左上角，第二个背景居中 */
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="card"></div>
</body>
</html>

说明： 通过多背景技术，可以在一个元素上叠加多个背景图像或渐变，实现更丰富的视觉效果。

案例四：固定背景实现视差滚动效果

<!DOCTYPE html>
<html>
<head>
  <style>
    .parallax {
      height: 100vh;
      background-image: url("bg.jpg");
      background-attachment: fixed; /* 背景图像固定，不随页面滚动 */
      background-position: center;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
  </style>
</head>
<body>
  <div class="parallax">欢迎来到我们的网站</div>
  <div style="height: 2000px;"></div> <!-- 长内容用于测试滚动效果 -->
</body>
</html>

说明： 使用background-attachment: fixed可以创建固定背景，结合长页面内容可实现视差滚动效果，增强用户体验。

案例五：表格行交替背景色

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2; /* 偶数行背景色 */
    }
    tr:nth-child(odd) {
      background-color: #ffffff; /* 奇数行背景色 */
    }
    td {
      padding: 15px;
      border: 1px solid #dddddd;
    }
  </style>
</head>
<body>
  <table>
    <tr><td>数据1</td><td>数据2</td></tr>
    <tr><td>数据3</td><td>数据4</td></tr>
    <tr><td>数据5</td><td>数据6</td></tr>
  </table>
</body>
</html>