css设置背景透明 兼容,每日一更之CSS背景透明内容不透明及CSS兼容性写法

有一个浏览器，让所有的前端极度痛恨，没错，就是IE。IE9以上版本的浏览器还好，但是，IE9及以下浏览器就相当的恶心，对于前端来说，最基本的就是还原UI设计图，但是当你使用一些CSS3属性的时候，IE浏览器并不能识别，也就是常说的IE浏览器不支持。IE5、6、7完全不支持CSS3属性，IE8、IE9也只是支持部分的CSS3新属性，这就对我们前端提出了新的要求，就是要写出兼容低版本浏览器的代码，其实再说直白点，就是要兼容IE低版本浏览器。因为其他的浏览器对CSS3的支持都挺好的。下面就为大家简单介绍一些IE浏览器的兼容方法。

首当其冲的做法就是在header里面先申明：

这个meta标签的意思就是告诉浏览器，在渲染该页面的时候使用IE9的内核。当然，也会遇到另外一种情况，就是在IE8下只有不使用兼容模式，页面才能正常显示，但是如果设定为IE8的模式，IE9里面又会导致CSS3失效，那么我们就需要对它进行另外一种meta属性的设置：

这样写，浏览器会逐个去进行查找，如果又IE9内核，就使用IE9，如果没有IE9内核的情况下就使用IE8，以此类推。

这样能解决一些设置的问题，但是如果用户的电脑没有IE高版本，我们怎么办？只有IE8以下的，我们又希望它能渲染出我们想要的CSS3效果，那么我们就要在CSS的代码中去解决了。

大家可以到http://www.cnblogs.com/hubl/p/5750552.html这里去看一下，我这里就不再一一去列举了，其实就是写兼容性代码，例如我们要添加阴影效果，但是box-shadow这个CSS3的新属性对低版本不兼容，我们正常的写法是：

box-shadow:5px 5px 5px #ccc；

我们要给它添加兼容性写法，就会变成下面这样：

box-shadow:5px 5px 5px #ccc;

-webkit-box-shadow:5px 5px 5px #ccc;

-moz-box-shadow:5px 5px 5px #ccc;

-ms-filter:"progid:DXImageTransform.Microsoft.shabow(Strength=8,Direction=13,Color='#cccccc')";

filter:progid:DXImageTransform.Microsoft.shabow(Strength=8,Direction=13,Color='#cccccc');

说白了，低版本的浏览器其实很多效果也能做出来，只是它的兼容性写法不一样。而且出来的效果可能不是很理想，不过这也没有办法，这是使用过滤镜做出来的；

下面我们再来说说一个经常用到的效果，透明度。

通常我们说到透明度，首先就会想到opacity属性，它确实很方便，但是它也不被IE9以下的浏览器识别，因此我们也是会使用兼容性写法：

filter:alpha(opacity=30);

这样，IE6、7、8浏览器都能做到透明了，不过这种opacity属性有一个局限性，就是设置了这个属性以后，该元素内的所有子元素都会被透明，而我们经常遇到一种需求，就是要让你做到，背景图片或者说是背景div半透明，但是里面的字不透明，这个该怎么解决呢？其实方法有很多：

1：使用rgba方法来解决

background:rgba(125,125,125,0.5)前3个属性是色值，0.5是你要的透明度，不透明1，0为完全透明，这样使用，我们的背景色是50%的透明，但是它里面的内容不会透明。但是这个方法有个缺点，就是它不支持IE8以下浏览器，那么我就就需要添加兼容性写法了：

filter:progid:DXlmage

Transform.Microsoft.gradient(startColorstr=#7F273c7d,endColorstr=#7F273c7d);

这个本来是用来实现渐变效果的，但是因为我们要实现半透明效果，所以我们把2个色值设成一样的，就是startColor和endColor。

其中前2位即上门面的7F73c7d中的7F代表的是不透明度，只是这里需要换成16进制的数值，所以就是7F，这样设置了以后就兼容IE8以下的浏览器了；

2：定位的方法，将背景和内容分别设置再不同的层上面，让内容定位到背景层上面，然后设置z-index的值，让内容的z-index值大于背景的就好。

这是一个很常用的效果，所以小伙伴们还是经常会用到的。今天的分享暂时到这吧，明晚继续。嘿嘿！

大家不要因为都是很常用的，很简单的就吐槽，本博客是从菜鸟篇开始写的，所以前期的东西对于大多数老司机来说都是渣渣，但是对于刚入坑，或者是准备入坑的新手来说，还是有一定帮助的。我会坚持更下去，后期也会分享MV*，前后端分离，前端架构等等的东西，所以大家跟着脚步走吧！哈哈