css如何实现图像的透明与不透明

　　1.图像透明不透明用到opacity元素，值为0到1，一般用0.4或0.6就够了。

　　2.ie8以下浏览器写法为：filter:alpha(opacity=40);值为0到100.一般为了兼容同时写两种。

　　3.用法有两种，第一直接写在图片上增加图片的模糊程度（相当于灰色蒙版）；第二把图片写在背景p里，嵌套p写带有颜色的蒙版，里面还可以加文字。具体写法如下：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<style>

　　img{

　　width:400px;

　　height:300px;

　　opacity:0.4;

　　filter:alpha(opacity=40);

　　}

　　img:hover{

　　opacity:1;

　　filter:alpha(opacity=100);/*ie8以下写法*/

　　}

　　.background{

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

　　width:400px;

　　height:300px;

　　}

　　.transparent{

　　width:400px;

　　height:300px;

　　background-color:#f941f3;

　　opacity:0.4;

　　filter:alpha(opacity=40);

　　}

　　.transparent:hover{

　　opacity:0;

　　filter:alpha(opacity=0);

　　}

　　font-size:48px;

　　display:block;

　　color:white;

　　text-align:center;

　　line-height:300px;

　　}

　　</style>

　　</head>

　　<body>

　　<imgsrc="img/t010c6ea3d87e5dcc351.jpg"/>

　　<divclass="background">

　　<divclass="transparent">

　　<p>filter:alpha</p>

　　</div>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56881.shtml