CSS 透明度

图片透明

原图 :

背景透明1.png

背景图透明.png

img{
  opacity:0.5;
  filter:alpha(opacity=50); /* IE8 及其更早版本 */
}

Opacity属性值从0.0 - 1.0。值越小,使得元素更加透明。1.0为不透明。

CSS - 图片透明 hover

当鼠标移到图片上的时,图片变透明。

img:hover{
  opacity:0.5;
  filter:alpha(opacity=50); /* IE8 及其更早版本 */
}

CSS - 背景色透明

opacity 会将字体颜色也进行透明度处理 :

div{
	opacity:0.5;
	filter:alpha(opacity=50); /* IE8 及其更早版本 */
}

如果只想要背景颜色进行透明度处理,那么用 rgba ,第4个参数值为0.0 - 1.0。 值越小,使得元素更加透明。1.0为不透明 :

div{
	background-color: rgba(255, 255 ,255 ,0.7);
}

背景色透明实例