crossline

▼opacity

font-size:12px;line-height: 150%;

 

 

 

 

今日は、バイト休み!!やった!!

とりあえずちゃんとサイトを仕上げる事を目標にがんばります

 

 

今回は

サイト制作をしていく中でわからない事がありすぎて調べまくったことをかいていきたいと思います

 

 

 

 

 

▼opacity / RGBa

要素に透過度をしていするプロパティ

 

opacity : 

.box { opacity : 0.8; }

(0.1/ 0.8 / 0.555など、小数点以下指定可能)

 

E・FirefoxOperaNetscapeSafari

filter : alpha ( opacity : 25)   ←IE 100が100%

-moz-opacity : 0.25; ←Firefox, Netscape

opacity : 0.25 ; ←Opera, Safari

 

 

 

 

やり方としては、こんな感じ。

f:id:ishuko:20140712110055p:plain

 

ブラウザ上では、こんな感じ

f:id:ishuko:20140712110149p:plain

 

こつは、position:relative;で透過させたくないところを指定することです。

 

 

 

ただ、ここで私を苦しめた点がありますw

「背景だけを透過させる」

 

これは2日悩まされましたw

調べて自分なりに解決した事

 

背景だけを半透明にするにはopacityではなく、rgbaを使う。
opacityは透明度を指定することができるスタイルで、子要素を含めて透明になる。
一方、rgbaは色とその透明度をしているすることができ、自要素は透明になるが子要素は透明にならない

参考:http://index-japan.jp/?p=1732

 

 

 

 

例)

f:id:ishuko:20140712111041p:plain

 

f:id:ishuko:20140712111140p:plain

このように、全体が透明になってしまう

 

 

f:id:ishuko:20140712111545p:plain

 

f:id:ishuko:20140712111531p:plain

 

 

できました!

 

こんなことに何時間もかけて悔しいですが、以外と調べてみるとみんな苦しんでるみたいw

あたしだけじゃないんだなって、安心しましたw

 

 

さて、今日はがんばらねば!!

 

 

 

 

 

広告を非表示にする