03-深入理解线性渐变

B 站视频教程

在 index.html 中加多 7 个容器

src/style/01-linear-gradient.scss

// 线性渐变背景 和 图片背景的叠加
.example11 {
  background: linear-gradient(to Right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)),
    url("https://cdn.pixabay.com/photo/2020/12/03/20/25/girl-5801502_960_720.jpg");
  background-size: 100% 100%;
}

// 渐变背景，设置的是 background-image 属性
.example12 {
  background-image: linear-gradient(
      to Right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1)
    ),
    url("https://cdn.pixabay.com/photo/2020/12/03/20/25/girl-5801502_960_720.jpg");
  background-size: 100% 100%;
}

// 只有一种颜色的渐变，从左到右
.example13 {
  background-image: linear-gradient(to Right, #ace, transparent);
}

// 只有一种颜色的渐变，从右到左
.example14 {
  background-image: linear-gradient(to Right, transparent, #fc9);
}

// 两种渐变背景的叠加
// 可以看出，下一个颜色渐变的方向，始终朝着上一个颜色渐变的相反的方向扩散
.example15 {
  background-image: linear-gradient(to Right, #ace, transparent),
    linear-gradient(to Right, transparent, #fc9);
}

// 当指定了颜色位置，
// 上一个颜色的终止位置为 45%，
// 下一个颜色的起始位置为 55%
// 那么上下两个颜色之间还有 10% 的范围互相扩散
.example16 {
  background-image: linear-gradient(to Right, #ace 45%, #fc9 55%);
}

// 当指定了颜色位置，
// 上一个颜色的终止位置为 50%，
// 下一个颜色的起始位置为 50%
// 那么上下两个颜色之间还有 0% 的范围互相扩散, 因此彼此不会互相扩散
.example17 {
  background-image: linear-gradient(to Right, #ace 50%, #fc9 50%);
}

// 重复的性线性渐变效果
// .example18 {
//   background: repeating-linear-gradient(
//     to Right,
//     #ace,
//     #ace 10px,
//     #fc9 10px,
//     #fc9 20px
//   );
// }

// 重复的性线性渐变效果 简便的写法
.example18 {
  background: repeating-linear-gradient(to Right, #ace 0 10px, #fc9 10px 20px);
}

// 重复的性线性渐变, 两个颜色之间互相扩散的效果
.example19 {
  background: repeating-linear-gradient(to Right, #ace 0 10px, #fc9 15px 25px);
}

把 index.html 的 复制到 src/html/01-linear-gradient.html