IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック

スカイ
(2006年9月21日 20:40) | | コメント(0) | トラックバック(5)

CSS設定でオブジェクトを半透明にできるプロパティがあります。
IEのみのCSSプロパティでしたが、Firefox・Operaでも同じように表示可能にできる方法を説明したサイトがありましたので紹介しておきます。
他にもいくつかのOpacityプロパティを使ったTipsが紹介されていますので、参考に覗いてみてください。

CSS Opacity in Mozilla,IE, and Opera

CSS Opacity in Mozilla,IE, and Opera

http://www.mandarindesign.com/opacity.html

CSS Opacity設定

以下のコードでIE・Firefox・Opera・Netscape・Safariで同等表示がえられます。

  filter: alpha(opacity=25);
  -moz-opacity:0.25;
  opacity:0.25;
IE
alpha(opacity=透明度);
100が100％となる。25％の場合は、25
Firefox・Netscape
-moz-opacity:.透明度;
1.0が100％となる。25％の場合は、.25
Opera・Safari
opacity:透明度;
1.0が100％となる。25％の場合は、.25

CSS3.0からは、opacity:透明度;の設定ですべてのブラウザで表示可能となるようです。

参考サイト

半透明のグラデーションをかける-タグインデックス
http://www.tagindex.com/stylesheet/filter/alpha.html

カテゴリ:

タグ:

トラックバック(5)

このブログ記事を参照しているブログ一覧: IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック

このブログ記事に対するトラックバックURL: http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/83

fixture.jp/blog - ほとんどのブラウザで背景の半透明化を可能にするCSS指定 (2006年11月29日 04:11)

前回のおさらい： #TB_overlay { position: absolut... 続きを読む

link-log powered by fullsizeimage.inc - ikesai.comでのopacityの使い方 (2007年3月 2日 10:43)

制作をしていればみんな一度は見ていると思う「ikesai.com」。 このサイトでサムネールをマウスオーバーすると画像がロールオーバーするんですが、何気な... 続きを読む

マウンテンブック - hover用のボタンを使わずにロールオーバーさせるCSS (2007年8月 6日 13:16)

hover用のボタンいらず ■IE・Firefox・Opera・Netscape... 続きを読む

日刊にしこり?埼玉版? - Firefox/IE/Safali/Operaで使える半透明CSS(opacity) (2007年12月28日 10:49)

a.popup1{position:relative;} a.popup1 span{ position:absolute; top:-20px; ... 続きを読む

Developpers-on-JOA (PukiWiki/TrackBack 0.3) - WEB制作関連ブクマ (2008年2月 1日 11:01)

ネットを徘徊してて、みつけたよさげなページを置いていきます。 読み物 web制作屋は、一体どのスキルを持っていれば即戦力なのか？17の作業に分解 ▲... 続きを読む

コメントする

検索

最近のブログ記事

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: ｆmtubesキャッチイメージ

  • mock.jpg

    mock.jpg: fm+tubesのモックページ（デザインレイアウト）。最終的にはこのスタイルでマルチブログで展開してみる構想。

  • mtdeinfo

    mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。

  • mytumblr

    mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです

  • caputure_contextmenu

    caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する

  • tumblrgallery

    tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。

  • psdtuts

    psdtuts: http://psdtuts.com/のイメージ画像

  • designflavor.

    designflavor.: http://www.designflavr.com/のイメージ

  • entrymain_template

    entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト（アーカイブテンプレート）、検索結果（システムテンプレート）の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

タグクラウド

このブログ記事について

このページは、スカイが2006年9月21日 20:40に書いたブログ記事です。

ひとつ前のブログ記事は「Movable Typeの新しいスタイルライブラリー/StyleCatcher by loftwork」です。

次のブログ記事は「Firefox　サークル出現」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。