css/scss文字背景渐变

<h2>Most popular tours</h2>

  display: inline-block;
  background-image: linear-gradient(
    to right,
    $color-primary-light,
    $color-primary-dark
  );
  -webkit-background-clip: text;
  color: transparent;

代码说明

• display: inline-block;将元素的显示类型设置为内联块级元素。允许元素在一行中显示，同时保留块级元素的特性，比如能够设置宽度和高度。

• background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);: 这一行代码创建了一个线性渐变背景，从左到右渐变，颜色从$color-primary-light: #7ed56f过渡到 $color-primary-dark: #28b485。$color-primary-light 和 $color-primary-dark是 设置的scss变量。

• -webkit-background-clip: text;它指定背景图片的裁剪方式为文本。这意味着背景图片将被裁剪成与文本内容相同的形状，并且仅显示在文本的区域内。

• color: transparent;: 这行代码将文本颜色设置为透明。这样做是为了隐藏文本内容，因为 -webkit-background-clip: text; 属性会显示背景图片，但不会显示文本内容本身。

效果图