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

Question

我想实现条形图的设计，其背景将是透明的，但边框将是彩色的。为了弄清楚这是我想要实现的目标：

背景透明：

我试图在我身边实现这个设计，但每当我试图使背景透明时，一切都变得透明，包括边框。

到目前为止，这是我的条形图：

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

<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>

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

Answer 1

假设这是Bootstrap进度条

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

Answer 2

将backgournd颜色更改为透明并添加边框。

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

Answer 3

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

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