CSS中的opacity,不透明度的坑
阿新 • • 發佈:2018-11-09
得到 支持 pan 整體 子節點 針對 用法 之間 半透明
opacity的用法示例如下
/* 值是0到1之間的數值 */ opacity:0.5
opacity設置在元素上的時候,會出現什麽效果?
答曰:如果不設置opacity的話,會顯示效果為A(可以理解為一個圖片),將A按照opacity設置的不透明度,就是得到的最終效果B。效果之間從最內側開始推。
舉例:
1 <div class="box1"> 2 <div class="con1"> 3 我是文字 4 </div> 5 </div>
情況1,如果設置box1不透明度0.5,顯示效果就是文字也是半透明的。
情況2,如果設置box1不透明度0.5,con1不透明度1,整體和上面一樣是半透明的。
情況3,如果設置box1不透明度0.5,con1不透明度0.5,那就是con1先0.5後,box1再0.5不透明度顯示效果。
-------------------
我曾經想,box1不透明度0.5,但con1設置為1顯示為不透明,於是就不透明了!
但是事實是他們的不透明度不是單獨的,不是你設置con1為不透明,於是就針對頁面不透明,而是con1針對box1不透明顯示後,box1是半透明的,於是又整體半透明了。
因此,要做出con1下有個投影(不是發光,不是陰影)效果,那麽另外一個div需要是它的兄弟節點,而不是父子節點。
另外,IE6和IE7不支持該屬性,用filter:alpha(opacity=50);代替opacity:0.5
CSS中的opacity,不透明度的坑