menu
menu

キーワード検索

 

12月更新・前月(11月)の人気記事トップ10 - 12/02/2019

  1. ( 1 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 5 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  3. ( 2 ↓) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  4. ( 3 ↓) 【CSS】CSSだけでドロップダウンメニュー
  5. (圏外↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  6. ( 4 ↓) 【Mac】外付けメディアが取り外せなくなったらSpotlightの除外項目を設定してみる
  7. (圏外↑) 【Google】Googleアカウントのメールアドレスを変更する方法
  8. (圏外↑) 【Mac】MacにGoogle Driveをインストール
  9. (圏外↑) 【Suica】iPhoneでSuicaをクレジットカード無しで使う方法
  10. ( 7 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
このエントリーをはてなブックマークに追加

【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 透過
このエントリーをはてなブックマークに追加