【Labs】CSSで要素の透過

こんにちは（・∀・）

今回はCSS3を使用して要素を透過させる方法をサンプルを使用してご紹介します。

CSSで要素の透過

1. サンプル

要素と要素を重ねて表示させて上の要素を透過させています。

HTML

<div class="box1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum maximus nulla at sollicitudin. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt arcu et eleifend tristique. Etiam pretium quam et rhoncus porta. Fusce varius mauris in leo dignissim, id imperdiet ex fringilla. Praesent bibendum ante quis pretium ullamcorper. Donec lacus dui, mattis et eros in, ultricies hendrerit orci. Sed quis libero vel ex placerat semper cursus id lorem.
</div>
<div class="box2">
要素と要素を重ねて表示しています。<br>
上になっている要素(これ)が透過して下の要素の文字が見えます。
<!--box--></div>

CSS

.box1 {
  padding: 10px;
}
.box2 {
  color: #fff;
  background: #000;
  filter: alpha(opacity=70);/*For IE*/
  opacity: 0.7;
  width: 80%;
  padding: 10px;
  position: relative;
  top: -150px;
  left: 50px;
}

Result

このサンプルはopacity:0.7で透過させています。0.7=70%となります。

なお、filterプロパティは古いIE用です。最新のブラウザはopacityプロパティに対応しているので、opacityプロパティで透過の指定をしておけばfilterプロパティは必要ありません。

2. サンプル

ボタン要素をマウスオーバーした際に透過させています。一番使うパターンですね。

HTML

<ul class="sample-demo2">
<li class="btn1"><a href="">btn1</a></li>
<li class="btn2"><a href="">btn2</a></li>
<li class="btn3"><a href="">btn3</a></li>
<!--sample-demo2--></ul>

CSS

.sample-demo2 {
  display: flex;
  justify-content: center;
}
.sample-demo2 .btn1 a,
.sample-demo2 .btn2 a,
.sample-demo2 .btn3 a {
  background: #9fb7d4;
}
.sample-demo2 .btn1 a:hover,
.sample-demo2 .btn2 a:hover,
.sample-demo2 .btn3 a:hover {
  opacity: 0.7;
}

Result

• btn1
• btn2
• btn3

btn要素にマウスオーバーするとopacityプロパティで要素を70%透過させて背景色を変えています。

関連リンク

【CSS3リファレンス】opacity