1.图像半透明
<!DOCTYPE html>
<html>
<style>
img {
opacity: 0.4;
filter: alpha(opacity=40);
/* 适用 IE8 及其更早版本 */
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
/* 适用 IE8 及其更早版本 */
}
</style>
<img src="img_sem_elements.gif" width="150" height="113" alt="klematis">
<img src="voice_rcd_btn_nor.9.png" width="150" height="113" alt="klematis">
</html>
其实很简单，就是设置图片透明度就行了。
2.在透明框中显示文字，背景是图片
<style>
div.background {
width: 500px;
height: 250px;
background: url(voice_rcd_btn_nor.9.png) repeat;
border: 2px solid black;
}
div.transbox {
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.8;
filter: alpha(opacity=80);
/* IE8 及更早版本 */
overflow: hidden;
}
div.transbox p {
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
<div class="background">
<div class="transbox">
<p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
</p>
</div>
</div>
就是设置背景和透明度，很简单的，不过要知道他们是如何布局的。
3.图像拼合技术
与其使用三个独立的图像，不如我们使用这种单个图像（"img_navsprites.gif"）：
img_navsprites.gif
有了CSS，我们可以只显示我们需要的图像的一部分。
实际例子如下：
<style>
img.home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
img.next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0;
}
</style>
<img class="home" src="img_trans.gif">
<br>
<br>
<img class="next" src="img_trans.gif">
<img class="home" src="img_trans.gif" /> -因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像
宽度：46px;高度：44px; - 定义我们使用的那部分图像
background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）
透明图片：其实就是1X1的透明图片而已，放上来看不见，可以去下载一个或者自己做一个。
4.图形拼合技术做一个导航栏
<style>
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;//这个也可以让它横起来，而不必使用float
top: 0;
}
#navlist li,
#navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
}
#home {
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 63px;
width: 43px;
}
#prev {
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 129px;
width: 43px;
}
#next {
background: url('img_navsprites.gif') -91px 0;
}
</style>
<ul id="navlist">
<li id="home">
<a href="/"></a>
</li>
<li id="prev">
<a href="/css/"></a>
</li>
<li id="next">
<a href="/css/"></a>
</li>
</ul>
这个例子很有意思，可以仔细看看。
也可以将#navlist删除，并将
navlist li {
margin: 0 10 0 0;
padding: 0;
list-style: none;
float: left;
}
改成上面这样，也是可以实现的。
