CSS - 불투명도를 지정하는 요소

opacity 는 투명도를 지정할 수 있으며 모든 요소에 사용할 수 있습니다. 불투명도는 0.0 ~ 1 사이의 수이며, 0 에 가까울수록 투명해집니다.

<style>
.use-div-line {
  width: 200px;
  height: 200px;
  border: 1px solid;
}
.use-section {
  padding: 10px;
  border: 1px solid;
  background: yellow;
}
.use-opacity1{
  opacity: 0.0;
}
.use-opacity2{
  opacity: 0.1;
}
.use-opacity3{
  opacity: 0.2;
}
.use-opacity4{
  opacity: 0.3;
}
.use-opacity5{
  opacity: 0.4;
}
.use-opacity6{
  opacity: 0.5;
}
.use-opacity7{
  opacity: 0.6;
}
.use-opacity8{
  opacity: 0.7;
}
.use-opacity9{
  opacity: 0.8;
}
</style>
<div class="use-div-line">
  <section class="use-section">
    <div class="use-opacity1">하보니 PHP</div>
    <div class="use-opacity2">하보니 PHP</div>
    <div class="use-opacity3">하보니 PHP</div>
    <div class="use-opacity4">하보니 PHP</div>
    <div class="use-opacity5">하보니 PHP</div>
    <div class="use-opacity6">하보니 PHP</div>
    <div class="use-opacity7">하보니 PHP</div>
    <div class="use-opacity8">하보니 PHP</div>
    <div class="use-opacity9">하보니 PHP</div>
  </section>
</div>