背景透明和ie跟谷歌和火狐px不同-20130729-CSDN博客

本文链接：https://blog.csdn.net/xjwolaile/article/details/84463842

今天在页面时候因为透明背景而弄了比较久现在就来说说两种方法

1、opacity:0.2; 这个方法会让在里面的所有带颜色的元素全部都变成透明那么0.2就是透明80%剩下20%的颜色这个方法不推荐因为在这个元素上面种有一些元素是不想让它变透明的而且它没办法在自身变化颜色，只有自己来设定颜色才行background-color: #000000;

2、background:rgba(0, 0, 0,20); 这个方法所改变的只会是你在当前设定的颜色背景颜色才会变化透明度，效果也是一样透明80%剩下百分之20%的颜色，那么如何改变颜色，使用颜色获得去器，前上面三个数字，把前面的三个数字写入前上个0里面就可以获得你要颜色而且不会影响元素的颜色

3、代码


ss{
    	background-color: #000000;
    	opacity:0.2;
    	color: #FF00FF;
    }
    //这个方法就会改变所有的元素颜色
    .dd{
    	background:rgba(0, 0, 0, 0.20);
    	color: #FF00FF;
    }
    //这个颜色只会修改背景的颜色就是在0里面输入的数字获得到的颜色，只会修改这个背景的透明度

4、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/6033/d637a378-7144-3656-a867-6ccc90a502e1.jpg[/img]

5、全部代码


<!DOCTYPE html>
<head>
    <style type="text/css">
    .ss{
    	background-color: #000000;
    	opacity:0.2;
    	color: #FF00FF;
    }

    .dd{
    	background:rgba(0, 0, 0, 0.20);
    	color: #FF00FF;
    }
    </style>
</head>
<body>
 <div class="ss">
 	<p>字体颜色会变</p>
 </div>

 <div class="dd">
 	<p>字体颜色不会变</p>
 </div>
</body>
</html>

6、ie和谷歌火狐的px的不同

效果图

[img]http://dl2.iteye.com/upload/attachment/0087/6040/f9238e2e-c6a1-357f-bbd8-7e07a4b1d761.jpg[/img]

谷歌效果

[img]http://dl2.iteye.com/upload/attachment/0087/6037/f1877d77-9c2d-3cd5-9b02-19e1bf8375de.jpg[/img]

火狐效果

[img]http://dl2.iteye.com/upload/attachment/0087/6046/297e5a96-694b-3771-b46b-19ef38bd2a21.jpg[/img]

ie效果

从上面可以看的出来谷歌和火狐都是正常显示出80的长度和100的高度，但是在ie上就会出现一些偏差，会比前两个游览器小一些不管是长度还是高度，所以一般在定义最外面的块级元素的时候不要用百分比来定义里面的可以，为什么因为在谷歌和火狐的游览器里可能你的屏幕是1390的那么100%的长度它就会是1390但是IE不一样IE的整个游览器的长度可能是1450的长度这样，要是最外面的块级元素用百分比的话就会出现在IE下长度变成不正常会比现实的小一些，因为不能所有的东西都是用百分比来定义长和高所有在那些不用百分比来定义的时候，就会出现比其他两个游览器要小很多的情况