博客

有很多网站都使用透明的效果来当背景条这样让网站看起来很美观，由于兼容性的问题我们要考虑到每个浏览器都能实现这个半透明效果我们可以这么写：
[code]filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/[/code]
简单解释，IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数（alpha(opacity)）使用大于0小于100的数值，其实也是百分比）。
从上面的代码中你没有看到Opera。没错，Opera还未支持标准的opacity，也没有其私有的可支持Alpha透明的属性。
但是，我们知道，Opera是支持Alpha透明的PNG图片的（当然Moz Family也支持）。所以我们可以使用背景图片来实现Alpha透明效果。
关键在于：
[code]background:transparent url(alpha80.png) left top repeat!important;
background:#ccc;
filter:alpha(opacity=50);[/code]
既然Moz Family支持Alpha透明的PNG，所以我们没有必要使用其私有属性了。当然，你可以使用标准的opacity，但别同时使用Alpha透明图片和opacity，这样的话就成了两者的混合了。你可以把上面的例子下载过来，然后/*opacity:.5;*/的注释看看。

关键词：css 图片底部 文字 半透明

现在的用户对网站都很挑剔所以网站越来越美观也做的越来越精致，往往网站的好看都是注重在细节上的修改，现在制作一个图片底部文字显示在半透明背景效果上，直接贴出代码：

[code]<ul class=”pic”>
<li><a href=”#”><img src=”images/pic1.png” width=”170″ height=”129″ /><span>文字文字文字文字</span></a></li>
<li><a href=”#”><img src=”images/pic1.png” width=”170″ height=”129″ /><span>文字文字文字文字</span></a></li>
<li><a href=”#”><img src=”images/pic1.png” width=”170″ height=”129″ /><span>文字文字文字文字</span></a></li>
<li><a href=”#”><img src=”images/pic1.png” width=”170″ height=”129″ /><span>文字文字文字文字</span></a></li>
</ul>[/code]

[code]ul.pic li{
width:170px;
height:129px;
float:left;
border:#f0f6f6 4px solid;
margin-left:5px;
margin-top:9px;
}

ul.pic li a{position:absolute;display:block;border:1px solid #555555;}
ul.pic li a:hover{border:1px solid #FFFFFF;}
ul.pic li span{width:170px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:alpha(opacity=50);-moz-opacity:0.6;opacity:0.6;font:bold 12px/30px Verdana, Arial; text-align:center;cursor:hand;}
ul.pic li a:hover span{text-decoration:underline}[/code]

这里简单说下有关float在IE6/7下的使用。大家都知道现在的浏览器众多，有些属性写法一样但是显示出的效果就不是我们想象的一致了，大家都知道float的作用是让对象浮动的意思，按道理来说让一个层浮动的话就会在普通层的上面并遮住未浮动的层，这样就能让一些模块呈现出左右的布局，其实在IE6/7情况下是不能这样实现的未浮动层反而占据了浮动层的文本流呈现出上下的布局，唯一的解决方法就是让左右布局的层都使用float属性，这样就可以兼容IE6/7了。