首頁 > web前端 > css教學 > css如何設定透明度不會影響子元素

css如何設定透明度不會影響子元素

王林
發布: 2020-08-11 16:56:30
轉載
3300 人瀏覽過

css如何設定透明度不會影響子元素

透過RGBA設定透明度,只有最新的瀏覽器支援,支援IE9 ,可透過RGBA的alpha通道的方式設定。

(推薦教學:CSS教學

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

前三個值是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 是完全不透明。超出取值範圍的值將恢復為預設值。

(影片教學推薦:css影片教學

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

範例:

<!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中文網其他相關文章!

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