suchen

Heim >Web-Frontend >CSS-Tutorial >So legen Sie Transparenz in CSS fest, ohne die untergeordneten Elemente zu beeinflussen

So legen Sie Transparenz in CSS fest, ohne die untergeordneten Elemente zu beeinflussen

王林
王林nach vorne
2020-08-11 16:56:303265Durchsuche

So legen Sie Transparenz in CSS fest, ohne die untergeordneten Elemente zu beeinflussen

通过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>

Das obige ist der detaillierte Inhalt vonSo legen Sie Transparenz in CSS fest, ohne die untergeordneten Elemente zu beeinflussen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie kann der CSS-Stil im HTML-Element festgelegt werden?Nächster Artikel：Wie kann der CSS-Stil im HTML-Element festgelegt werden?

In Verbindung stehende Artikel

Mehr sehen