首頁 > web前端 > css教學 > css如何設定透明度不影響子元素?相容於所有瀏覽器寫法

css如何設定透明度不影響子元素?相容於所有瀏覽器寫法

云罗郡主
發布: 2018-10-18 16:02:15
轉載
3522 人瀏覽過

    這篇文章帶給大家的內容是關於,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

css如何設定透明度不影響子元素?相容於所有瀏覽器寫法

<body>
<p style="background-color:rgba(0,255,0,0.2);"> 显示文字 
</p> 
</body>
登入後複製

透過RGBA設定透明度,只有最新的瀏覽器支援,支援IE9 ,可透過RGBA的alpha通道的方式設定。
前三個值是rgb的顏色值,最後一個透明度的值,取值為0~1,值越小越透明。

相容於所有瀏覽器寫入:

background-color:rgba(0,0,0,0.25);
filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#40000000,endColorstr=#40000000);
登入後複製

注意:startColorStr 和endColorStr 的值,前兩位是十六進位的透明度,後面六位是十六進制的顏色。

其格式為 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 為十六進位正整數。取值範圍為 00 - FF 。 RR 指定紅色值, GG 指定綠色值, BB 指定藍色值,請參閱 #RRGGBB 顏色單位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值範圍的值將恢復為預設值。

2位元透明度的轉換方法:x=alpha*255 ,將計算的結果 x 轉換成十六進位即可。

js換算16進位方法: x.toString(16)

例如:上面的0.25 透明度,換算為IE的AA透明度: var a = 0.25 * 255 = 63.75 ~= 64 ;  a.toString(16) = 40

範例:設定透明度給input並不會影響子元素(相容IE8)

<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
body{margin:0;padding:0;}
.div_content{
    background: url("1.gif") no-repeat;
    /*给input框添加背景图片,以凸显其透明效果。*/
    width: 200px;
    height: 200px;
}
.div_content>input{
    outline: none;
    border: none;
    background-color: transparent;
    /*必须将背景色设为透明,否则无效。(除非对于要设置的元素本身已经是透明的,如:span元素等)*/
    background-color: rgba(0,0,0,0.25);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#40000000,endColorstr=#40000000);
}
</style>
</head>
<body>
    <div  class="div_content">
        <input type="text" size="20"/>
    </div>
</body>

</html>
登入後複製

以上就是對的全部介紹,如果您想了解更多有關CSS影片教學,請追蹤PHP中文網。

以上是css如何設定透明度不影響子元素?相容於所有瀏覽器寫法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板