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

【问题标题】：How to make the background of a Bar chart transparent using CSS?如何使用 CSS 使条形图的背景透明？
【发布时间】：2018-05-21 12:29:36
【问题描述】：

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

背景透明：

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

这是我目前的条形图：

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

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

请问，如何实现透明效果？谢谢你。

【问题讨论】：

标签： html css twitter-bootstrap jquery-animate

【解决方案1】：

假设这是 Bootstrap 进度条

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：