Html 如何使用CSS使条形图的背景透明？

我想实现一个条形图的设计，背景是透明的，但边框是彩色的。为了说明这一点，我正努力做到：

背景透明：

我曾尝试在我这边实现设计，但每当我尝试使背景透明时，所有东西都变透明，包括边框

这是我目前为止的柱状图：

如果你想帮忙的话。这是我的代码：

<div class="col-md-4 progress skill-bar">
    <div class="progress-bar" role="progressbar" aria-valuenow='70' aria-valuemin="0" aria-valuemax="100"  style="background-color: yellow">
        <span class="skill" id="content"></span>
    </div>                
</div>

这是我的css：

<style type="text/css">

.progress {
  height: 100px;
  margin-top: 400px;

}
.progress .skill {
  font: normal 12px "Open Sans Web";
  line-height: 35px;
  padding: 0;
  margin: 0 0 0 20px;
  text-transform: uppercase;
}
.progress .skill .val {
  float: right;
  font-style: normal;
  margin: 0 20px 0 0;
}

.progress-bar {
  text-align: left;
  transition-duration: 3s;
}
</style>

.进展{
高度：100px；
边缘顶部：400px；
}
.进步.技巧{
字体：普通12px“开放式SAN Web”；
线高：35px；
填充：0；
利润率：0.20px；
文本转换：大写；
}
.进步.技能.瓦尔{
浮动：对；
字体风格：普通；
利润率：0.20px 0.0；
}
.进度条{
文本对齐：左对齐；
过渡时间：3s；
}

---

请问，我怎样才能达到透明效果？多谢各位

假设这是引导进度条

.progress {
    background: transparent; // add this line
}

---

将背景颜色更改为透明并添加边框

.progress{
   background: transparent;
   border: 2px solid black; // the color you want the chart to be
}

---

将背景更改为透明和边框颜色

.progress { 
     background: transparent; 
     border-color:black;
 }