Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

CSSで要素を半透明にする

参考にさせて頂いたページ

IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン BLOG

今日のPython: CSSで半透明にできるOpacityプロパティとIEでの問題について

記述例 1

IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン BLOGからソースを引用させて頂いています。

.example-1{
  filter: alpha(opacity=25);
  -moz-opacity:0.25;
  opacity:0.25;
}

以下のコードでIEFirefoxOperaNetscapeSafariで同等表示がえられます。

とのことです。

記述例 2

今日のPython: CSSで半透明にできるOpacityプロパティとIEでの問題についてからソースを引用させて頂いています。

IE6,7とかIE8に対応するにはこういう記述になるのかな?

.example-1{
  opacity:0.7;
  filter: alpha(opacity=70);        /* ie lt 8 */
  -ms-filter: "alpha(opacity=70)";  /* ie 8 */
  -moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
  -khtml-opacity: 0.7;              /* Safari 1.x */
  zoom:1;
}

おわりに

compass使うのもやめようと思っているし、このあたりを適当に調整してmixinを書くと良さそうかなー。と思うので覚書として。