WEB Tips デザイン・コーディング

クロスブラウザ(IE8以下でも)opacity,RGBaに対応する

本記事にはプロモーションが含まれている場合があります。

クロスブラウザ(IE8以下でも)opacity,RGBaに対応する

IE8以下では透明の要素(opacity,rgba)には対応していませんが、
IE8以下でも対応させるには

opacity:0.7;
filter: alpha(opacity=70);        /* ie5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /* ie8 */

例えば背景だけを透過させてテキストは透過させたくない場合は、opacityではなくRGBaを設定します。

.box{
background-color: rgba(0,0,0,0.8);
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff); /* IE8以下*/
}

GradientType

グラデーションの方向を指定
0は縦方向、1は横方向のグラデーションになります。

StartColorStr

グラデーションの開始の色を指定。
#00000000~#FFFFFFFFの範囲の指定。最初の00〜FFで透明度を指定します。

EndColorStr

グラデーションの終わりの色を指定
#00000000~#FFFFFFFFの範囲の指定。最初の00〜FFで透明度を指定します。

参考サイト

RGBa Browser Support
http://css-tricks.com/rgba-browser-support/

IE8とIE9できれいに透過を適応させるCSS
http://news.ko-zu.com/bgiecss/

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大35%キャッシュバックで月額費用643円&ドメイン永久無料 - 2023年11月28日(月)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額643円 55%OFF - 2023年11月30日(木)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, デザイン・コーディング
-