menu
menu

キーワード検索

 

前月(1月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( - ↑) 【WiMAX】HUAWEI W04 気づくとWi-Fiの接続が切れてる
  6. ( 6 - ) 【PHP】PHPでシンプルなメールフォーム
  7. ( 5 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  8. ( - ↑) 【決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️
  9. ( - ↑) 【制作Tips】iPad画面解像度まとめ
  10. ( 7 ↓) 【CSS】レスポンシブデザインのブレークポイントは⁉
このエントリーをはてなブックマークに追加

【CSS3】CSSで要素の透過

【CSS3】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
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.
要素と要素を重ねて表示しています。
上になっている要素(これ)が透過して下の要素の文字が見えます。

このサンプルは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

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


関連リンク

opacity【CSS3リファレンス】
CSS3リファレンス

  • CSS3 透過
このエントリーをはてなブックマークに追加