エフェクト

opacity

透明度を指定します

value	description
`0.5`	透明度を指定する
`50%`	透明度を指定する

Demo

opatcity: 100%

opatcity: 80%

opatcity: 50%

opatcity: 10%

カーソルを近づけてね

opatcity: 100%

opatcity: 50%

<div class="wrapper">
  <div class="box box-1">opatcity: 100%</div>
  <div class="box box-2">opatcity: 80%</div>
  <div class="box box-3">opatcity: 50%</div>
  <div class="box box-4">opatcity: 10%</div>
  <div class="box box-5">
    カーソルを近づけてね
    <div class="opacity-value-100">
      opatcity: 100%
    </div>
    <div class="opacity-value-10">
      opatcity: 50%
    </div>
  </div>
</div>

.box-1 {
  opacity: 100%;
}
.box-2 {
  opacity: 80%;
}
.box-3 {
  opacity: 50%;
}
.box-4 {
  opacity: 10%;
}
.box-5:hover {
  /* ホバー時にOpacityを50%にする */
  opacity: 50%;
}
.box-5 {
  /* box-5でのOpacityの変化にアニメーションをつける */
  transition: opacity 0.3s;
  grid-column: 1 / 5;
}
.box-5 > .opacity-value-100 {
  display: block;
}
.box-5 > .opacity-value-10 {
  display: none;
}
.box-5:hover > .opacity-value-100 {
  display: none;
}
.box-5:hover > .opacity-value-10 {
  display: block;
}

.box {
  width: 100%;
  height: 100px;
  border-radius: 12px;
  background: #0284c7;
  padding: 12px;
  text-align: center;
  font-size: 14px;
  font-family: monospace;
}

.wrapper {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}

概要

%または小数で透明度を指定します。 opacity を（1や100%以外に）指定した場合、その要素全体の透明度が変化します。要素にテキストや他の要素が含まれる場合、それらの透明度も変化します。

テキストの透明度を下げたくない（背景色のみ透明度を上げたい）場合は、backgroundで透明色を指定しましょう。

また要素を非表示にするためにopacity: 0;を指定することは不適切である場合が多いです。例えばbutton要素を透明にしても、マウスを合わせるとクリックが可能です。

opacity: 100%;

右の枠内のボタンをクリックしてください

opacity: 0%;

右の枠内の透明なボタンをクリックしてください

要素を非表示にする方法はいくつかありますので、こちらをご覧ください。

opacity

Demo

概要

関連

参照