css如何设置透明度(兼容ie,firefox)

html-css023

css如何设置透明度(兼容ie,firefox),第1张

方法一：针对ie，在子容器添加：position:relative针对firefox等就只能使用pngbackground:url(images/boxbg.png)/*以下只有ie识别*/*background:#cccccc方法二：简单描述一下，也是网上常见的方法。构造三个容器首先，让需要透明的容器和不透明容器保持兄弟关系。然后，通过父容器控制大小让两个兄弟容器通过定位保持一个看似父子的排列方式。方法二是规避了透明度的继承问题，并不是解决了透明度继承问题

首先确定你电脑上的IE版本。360是基于电脑版本的IE

其次，你的问题没有说清楚是图片透明，还是代码透明兼容

如图片的是png半透明

代码的是滤镜透明

最后，如果是图片透明，非平铺的png透明不需要JS。

background:url(../images/logo.png) no-repeat//兼容非IE6浏览器

_background:none_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/templates/default/images/logo.png)//兼容IE6浏览器

而平铺的半透明png图片 如果是颜色渐变，无图片等也可以使用CSS3和滤镜实现全兼容。有图片的就只有使用JS了。

1.css3新增的一个属性rgba,语法

R：红色值。正整数 | 百分数

G：绿色值。正整数 | 百分数

B：蓝色值。正整数| 百分数

A：透明度。取值0~1之间

2.设置透明度是不会被继承的，所以不用头疼继承的问题.字体透明度便设置成color:rgba(0,0,0,0.5)边框：border:5px solid rgba(0,0,0,0.5)或者背景都可以。

3.兼容性。支持ie9及以上的浏览器

4.css2中opacity制作背景色通常用到，可是要用他来制作边框色或都说前景色的话，那他就有心无力了。

5.二者区别opacity后代元素会随着一起具有透明性，所以我们Opacity中的字随着透明值下降越来越看不清楚。但是rgba不存在这种问题。

6.比如做一个背景的透明度，那么

<style>

.div{background:rgba(0,0,0,0.5)width:100pxheight:100pxcolor:red}

.div1{background:#000width:100pxheight:100pxcolor:rgba(255,255,255,0.5)}

</style>

<div class="div">

    我是文字

</div>

<div class="div1">

    我是变透明的文字

</div>

文字不会被影响的。

7.如果需要设置字体的透明度，可以对color的rgba属性进行设置。