VUE中使用CSS实现段落加背景色

// DOM
<div style="width: 500px;">
  <span v-for="(item,index) in str" :key="index" class="brColor">{{ item }}</span>
</div>

// 字符串变量
data() {
    return {
      str: 'CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。'
   }
}

// CSS
.brColor {
  font-size: 14px;
  font-weight: 600;
  background-image: linear-gradient(#fff 30%, rgba(250,237,80,0.5) 100%,)
}

效果：