忍者ブログ

CriCri

クリエイティブになりたいクリクリ工房

   

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

デモランキングバナー

半透明フィルター

あるブロックを半透明にしたい場合、IE独自仕様のアルファフィルターと、CSS3に入っているフィルターを両方指定すればできます。
現在のW3CのCSS Varidater はCSS2で検査されていますが、主なブラウザはすでにCSS3に対応しているので、CSS2に規定されていないopacityを指定しても読み取ってくれる。
例: background-color: #FFF;
      filter:alpha(opacity=75);
      opacity:0.75;
IEのアルファフィルターは、真ん中のfilter:alpha(opacity=75);の部分で、これは不透明度75%になります。

IEの半透明フィルターが半透明にならない
他のブラウザのCSS3への対応のおかげで、レイヤーを半透明にするのも楽になりましたが、例によってIEでは、これだけでは半透明になってくれません。
hasLayoutの値をtrueにする指定を一緒に書き込んでやらなくちゃいけない。

hasLayioutについては、colissさんのサイトで説明されていますのでそちらで見てください。
colissさんの受け売りではありますが、どのような指定をすればいいかを下に書いてあります。
  • display:inline-block;
  • height:実際の値;
  • width:実際の値;
  • float:left または right;
  • position:absolute;
  • writing-mode:tb-rl;
  • zoom:任意の値;
高さや幅が指定できない場合、この中で一番使いやすいのはzoomです。
なので、IE対策ではよくzoom:1 が使われます。
半透明フィルターも、このzoom:1 を一緒に指定してやれば、ぱっと半透明になってくれます。


上にくる画像が透明になってしまう
しかし、半透明にしたブロックをよく見ると、その上にくる画像も半透明になってしまっています。
透明度が高ければ高いほど、画像も透き通ってしまって、これでは見づらいこと甚だしい。
これを回避する方法を今まで知らなかったのですが、偶然見つけました。

IEは問題解決
半透明にしたレイヤー(親要素)の上にくる次のレイヤー(子要素)のCSSの中に、文字や画像を不透明にする指定を書き込みます。

position:relative;

これで、半透明になったブロックの上に文字や画像が来ても、透き通らずにきれいに表示されます。
ただ、これはIEだけに有効のようで、CSS3の半透明フィルターには効きませんでした。
また解決策をどこかで見つけたら、メモすることにします。


IE以外の半透明フィルターで出た問題
プラグイン全体ではなく、それぞれのブロックに半透明フィルターをかけたところ、大きな問題が出ました。
それぞれのプラグインの中に納まるものはOKなのですが、カウンターで撃沈してしまった。
マウスをカウンターの上に持っていくと下にレイヤーが出てきますが、このレイヤーが次のプラグインの下に潜り込んでしまう。
試しに上のpositionを指定してみたり、レイヤーの順番を変えるz-indexを指定してみたけど、どれも効果はなし。
う~ん、と唸りながらあちこちを探し回ったけれど、解決策にはぶち当たらなかった。

仕方ないので、この問題の解決策としてPNGの半透明画像を使うことにしました。
これなら上にくる画像が透明になることもないし、カウンターのレイヤーも下に潜らない。
IE6は半透明PNGには対応していないので、IE6だけ半透明フィルターを指定することでIEの問題もするりと回避。
見た目ではフィルターなのか画像なのかわからないから、まあいいや。

拍手[4回]

デモランキングバナー
  

COMMENT

NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 

TRACKBACK

TrackbackURL

カレンダー

03 2017/04 05
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30

AD

PR

ブログ内検索

素材サイト様

White Board様
White Board Banner
妙の宴様
妙の宴 Banner
もずねこ様
Mozneko Banner
押し花とアイコン様
押し花 バナー
petit sozai emi様
petit sozai emi
幕末維新新選組様
幕末維新新選組
The Heart of Eternity 様
thoe バナー
Crambon様
Crambon バナー
DragonArtz Design 様

プロフィール

メール de コンタクト

このブログへのリンク

Firefoxを支援しています

管理人はFirefoxの愛好者です。Internet Explorer は大嫌い。IEよりはるかに優れたFirefoxをお試しあれ。ダウンロードは下のバナーから無料でできます。
Firefox ブラウザ無料ダウンロード

現在の閲覧者

Copyright ©  -- CriCri --  All Rights Reserved

Design by CriCri / material by DragonArtz Desighns / powered by NINJA TOOLS / 忍者ブログ / [PR]