html中分层图片透明显示,怎样用css弄出有透明度的图片

如何用css来设置透明度，图片透明度的设置，opacity的使用。如何做到浏览器的兼容。下面为各位一一解答。

1、css透明度设置.opacity{opacity: 0.5;}，代码和效果图片如下。

Document

body{

background: url('./img.jpg') no-repeat;

}

.opacitybox{

width: 400px;

height: 200px;

background: #fff;

margin: 0 auto;

margin-top: 300px;

background: #fff;

}

.opacity{

opacity: .5;

}

2、图片透明度设置.opacity img{opacity: 0.5;}，代码和效果图片如下。(相关课程推荐：css视频教程)

Document

body{

background: url('./img.jpg') no-repeat;

}

.opacitybox{

width: 400px;

height: 200px;

background: #fff;

margin: 0 auto;

margin-top: 300px;

background: #fff;

}

.opacity img{

opacity: .5;

}

3、兼容性设置/*兼容旧浏览器透明度的设置方法*/

.opacity{

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

}

本文来自css答疑栏目，欢迎学习！