CSS – 透明度

2012-07-09 / JSN / 0 Comments / 9 次瀏覽

一般網路通常都使用的css 屬性：opacity 
但我發現這主要是用在整體性的透明化，因為透明的特性會繼承到子元素。

如果要做到「背景透明，前方文字不透明」的效果
在非IE應該要使用background : rgba() 為主

範例如下

    <style> 
        #wrapper 
        { 
            background :  #369 ; 
            width : 300px ; 
            height : 150px ; 
        } 
        #div1 
        { 
            -moz-opacity :  0.3 ;  /*  FF 3.5以下  */ 
            opacity :  0.3 ;  /*  FF 3.5及以上  */ 
            filter :  alpha(opacity=30) ;  /*  IE6及以上  */ 
            background :  #fff ; 
            width :  200px ; 
            height :  50px ; 
        } 
        #div2 
        { 
            background :  rgba(255, 255, 255, 0.3) !important ;  /*  IE無效，FF有效  */ 
            background :  #fff ; 
            filter :  alpha(opacity=10) ; 
            width :  200px ; 
            height :  50px ; 
        } 
        #div2 span 
        { 
            position :  relative ; 
        } 
    </style> 
 
<div  id ="wrapper"> 
    <div  id ="div1"> 

            <span>stringstringstringstring1</span> 
    </div> 
    <br  /> 
    <div  id ="div2"> 
            <span>stringstringstringstring2</span> 
    </div> 
</div>