css实现png图片透明的方法

html-css014

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)

目标背景样式只能用这种方法去做

background:url("images/search_inpbg.png")

no-repeat

0

0*background:

none

transparent

scroll

repeat

0%

0%

FILTER:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/search_inpbg.png',

sizingMethod='scale')

滤镜里面的图片是相对于你页面的路径。而不是样式的路径

。。。。你可以去看下我的

http://www.ok22.org

指向视频

会显示播放效果..你可以把我的样式下载下来看下。加粗是你应该理解的地方。其实滤镜的图片要刚刚跟你控制的DIV大小一样才行。。（除非你用的是一个的没有过渡效果透明PNG）这样才不会变形

说明一下，

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

<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>