WEB课堂随笔—背景透明应用

在许多网页的特效中，我们经常看到有一些图片或者背景是透明的。通过背景透明再加上css其他特效就可以达到关灯开灯的效果。在许多其他特效中都可以见到背景透明。这些效果都是如何实现的呢？今天我给大家分享下今天所学到的知识，如何把背景变为透明。
让背景透明的方法有许多。下面我来介绍其中的四种方法，这四种方法各有利弊。我会向大家一一介绍。好了，废话不多说，上教程。

1.opacity属性与filter属性

IE浏览器的写法是filter:alpha(opacity=value); value的取值是0-100，数值越小越透明。为了兼容其它浏览器建议再加上opacity这个属性。他的写法是opacity: .value；value的值是0-1，数值越小越透明。这个方法用起来很容易，在你需要的元素上加上这个两个属性就可以了。

.box1{ width:400px; height:400px; opacity: .5;filter:alpha(opacity=50); margin:0 auto}

透明方法1

WEB初学者 WEB初学者 WEB初学者

QQ截图20171221154330.png

效果如上图所示。但是这个方法有个缺点。给父元素添加这两个属性时，父元素下面的所有子元素都会变得透明，这样一来当我想让文字不透明时这个方法就不适用了。

2.position方法

用这个属性并不是用position把图片做成透明的，这个属性是用来定位的它也没有属性值可以用来做图片的透明度，那为什么会提到这个方法呢？我们在需要透明的元素后面在添加一个空元素。再用第一种方法把这个空元素做成透明的元素，再用position这个属性把这个空元素定位到我们需要透明元素的层下面就可以达到我们所需要的效果。

.box2{width:400px; height:400px;margin:0 auto; position:relative}
.box2 .box_3{ width:400px; height:400px; opacity: .5;filter:alpha(opacity=50); position:absolute; top:0; z-index:-1; background-color:#FF0}

透明方法2

WEB初学者 WEB初学者 WEB初学者

QQ截图20171221162311.png

效果如图上图所示，这个方法是兼容性最好的一种方法也是想让哪里透明就让哪里透明。但是这个方法因为要用到position这个属性，所以写代码时很容易就出现错误。

3.直接插入一张透明的背景或者透明图片

这个方法没啥要解释的很简单，就是图片原本就是透明的。插入进去就可以了。但是要用到这个方法就要和UI的小姐姐打好关系让他帮你把图片PS成透明的，不然就要自己想自己慢慢抠图吧。

.box3{width:400px; height:400px;margin:0 auto; background:url(images/png32.png) no-repeat}

透明方法3

WEB初学者 WEB初学者 WEB初学者

QQ截图20171221162938.png

效果如上图所示，透明图片分为：.gif,.png8,.png24,.png32;建议使用.png8格式。其他24和32格式在IE6及其一下版本时不支持的。

4.css3新增属性rgba

这个方法和第一种差不多就是在元素上使用background:rgba()这个属性。这里就不再演示了，优点就是知识把当前元素透明，其他不动。但是这个方法还是有一些浏览器时不兼容的。

个人推荐还是第二种方法，虽然麻烦点但是兼容性时最好的。