バージョン8以前のIEはcssでrgbaが使えない。
いちいち画像作るのも面倒だったので、探してみたら、IE8以前向けに、自動で画像を作ってcssもつけてくれるプラグインを見つけた。
参考:https://github.com/aaronrussell/compass-rgbapng
■インストールが必要
gem install compass-rgbapng
■config.rbに下記を追加
require "rgbapng"
■cssファイルに下記を追加
@import "rgbapng";
■変数の設定
$rgbapng_path: 'my_pngs'; //自動で作ってくれる画像を格納するフォルダ名
$rgbapng_px_size: 8; //作成する画像のサイズ
■新しく追加されたMIXINを使うと動作する
rgba-background($color, [$path, $pixel]);
これが
@include rgba-background(rgba(0,0,0,0.75));
こうなる
background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);
IE6には対応していないようで、もしIE6を使いたいなら‥
・DD_BelatePNGを使う
・自分でIE独自フィルターを使ったMIXINを作る
・Universal styesheetを使う
のどれかを選んだらと言ってくれてます。
0 件のコメント:
コメントを投稿