css实现png图片透明的方法

html-css033

css实现png图片透明的方法,第1张

实现透明的css方法通常有以下3种方式（以下是不透明度都为80%的写法）

css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8

css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)

IE专属滤镜 filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=80)

说明一下，

背景图片是调整不了透明度的，你只能调整容器的透明度来实现容器内的背景，内容也出现透明度。

<style>

#box{

width:200px

height:200px

background:url(背景路径)

opacity:0.5

filter:"alpha(opacity=50)"

-ms-filter:"alpha(opacity=50)"/* 旧版IE */

}

</style>

<div id=box></div>

ie6是不支持opacity这个属性的，如果一定要做透明背景，建议使用GIF格式的图片，把图片做成透明的，然后设为背景。PNG格式的图也能做成透明的，但在IE6中会有点问题，也可以使用JS代码 修正，但最好还是用GIF。