Как сделать фон гистограммы прозрачным с помощью 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>

Это мой код:

<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

Измените цвет фона на прозрачный и добавьте рамку.

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

Answer 2

Измените цвет фона на прозрачный и границы.

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

Answer 3

Предполагая, что это индикатор загрузки Bootstrap

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