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;
}
改成上面這樣，也是可以實現(xiàn)的膝昆。
