el-progress进度条深度选择器修改背景色线条渐变色

最近项目中使用到进度条,关于进度条的颜色,ui画的长这样,
在这里插入图片描述
这是我一开始画的,
在这里插入图片描述
其实element上的进度条实际上长这样
在这里插入图片描述
我把蓝色这一块改成白色后,发现和底色一样,就看不出进度的效果了,所以随便先调了一个颜色,结果被ui小姐姐无情的指出要修改
好吧,修改之后进度条长这样
在这里插入图片描述
仔细看是有渐变色效果的,现在上代码

     <div class="header_pic_1 header_pic_img1">
       <el-progress :percentage="70" ></el-progress>
      </div>
 .header_pic_img1 {
    background: url("~@/assets/images/xxx.png") no-repeat;
 ::v-deep .el-progress { 
  .el-progress-bar{
 .el-progress-bar__outer{
   background:linear-gradient(to right#8075fd , #b87bfe)  
 } 
  .el-progress-bar__inner{
  background:linear-gradient(to right, #8075fd ,  #f9fdf8)
}
   }
}
  }
  .header_pic_img2 {
    background: url("~@/assets/images/xxx.png") no-repeat;
    ::v-deep .el-progress { 
  .el-progress-bar{
 .el-progress-bar__outer{
   background:linear-gradient(to right,#8cc8fa,#a4b7fd)  
 } 
  .el-progress-bar__inner{
  background:linear-gradient(to right, #8cc8fa, #f9fdf8)
}
   }
}
  }
  .header_pic_img3 {
    background: url("~@/assets/images/xxx.png") no-repeat;
  ::v-deep .el-progress { 
 .el-progress-bar{
 .el-progress-bar__outer{
   background:linear-gradient(to right,#f2a4aa,#f5bda3)  
 } 
 .el-progress-bar__inner{
  background:linear-gradient(to right,#f2a4aa,#f9fdf8)
}
 }
}
  }
  .header_pic_img4 {
    background: url("~@/assets/images/xxx.png") no-repeat;
     ::v-deep .el-progress { 
  .el-progress-bar{
 .el-progress-bar__outer{
   background:linear-gradient(to right,#98e8bb,#baeb9e)  
 } 
  .el-progress-bar__inner{
  background:linear-gradient(to right,#98e8bb ,#f9fdf8 )
}
   }
}
  }
}
::v-deep .el-progress__text {
  margin-left: -10px;
  color: #fff;
}


el-progress所在的div有一张背景图,一排有四个div对应四张背景图。el-progress的样式要深度选择器才能修改到,四个progress一开始用nth-child的方式 想给每个progress修改为不一样的颜色,但是试了几种都没成功。
我用的是sass预编译器,通过层级嵌套,作用到每一个独立的div,从而改变内部的progress的背景色。

你可能感兴趣的:(element,css)