按照css2之前的濾鏡屬性opacity，會繼承到內容上，也就是說我們給乙個div設定了opacity：0.5，div裡的文字也會出現半透明效果。點此檢視demo。
為了避免這種情況發生，我們不得不多增加乙個div，用來透明背景，而另外乙個放內容的div就不設背景，只要這2個div大小座標保持一致，且放內容的div顯示在透明背景的div上就達到效果了，點此檢視demo。
>無標題文件
title
>
<
style
type
="text/css"
>
style
>
head
>
<
body
>
<
div
class
="imgdiv"
>
<
img
src=""
width
="300"
height
="450"
/>
<
div
class
="opacity"
>
div>
<
p>這個肯定是美女
p>
div>
body
>
html
>
大家比較這2個demo就可以看出效果。
現在有了css3的rgba這個屬性，就不用這麼麻煩了，當然這也得要瀏覽器支援才行。一般童鞋們定義顏色都是用十六進製制表示。如：background:#000000，表示背景色為黑色。當然也可以用rgb三原色值表示，如：background:rgb(0,0,0)，也表示背景色為黑色。rgba只是在rgb的基礎上增加了乙個a，這個a表示透明度。而且這個屬性不會被子元素繼承下去，可以在定義顏色的屬性使用，如：
這樣我們要實現背景透明內容不透明就不必增加乙個div了，但是ie目前的版本都不支援該屬性(不知道ie9是否支援)，所以我增加乙個ie條件注釋，就是在ie下還是用上面的方法。測試通過環境：ff3.6，safari5，ie6,7,8。
點此檢視完整demo。
>無標題文件
title
>
<
style
type
="text/css"
>
style
>
head
>
<
body
>
<
div
class
="imgdiv"
>
<
img
src=""
width
="300"
height
="450"
/>
<
p>這個肯定是美女
p>
div>
body
>
html
>
**：個人收藏學習用
css3之透明濾鏡新用法
按照css2之前的濾鏡屬性opacity，會繼承到內容上，也就是說我們給乙個div設定了opacity 0.5，div裡的文字也會出現半透明效果。點此檢視demo。為了避免這種情況發生，我們不得不多增加乙個div，用來透明背景，而另外乙個放內容的div就不設背景，只要這2個div大小座標保持一致，且...
遇見CSS3濾鏡
譯自 jeffrey way於2011年12月22日 教程詳細內容 主題 css濾鏡 可用性 webkit每晚構建的版本 酷炫程度 100 演示 本月初公布了乙個新的規範 濾鏡效果1.0。它提出了一些令人興奮的新特性，我們可以使用它在瀏覽器中來建立photoshop般的效果。更妙的是，webkit已...
css3 濾鏡效果
色相旋轉 曾經和photoshop色相 飽和度面板打過交道嗎？現在好了，你可以在瀏覽器中應用它。img 如果對這個度數值如何設定感到困惑，可以試想一下乙個色輪。您指定的度數值決定了該輪停止之處。這意味著 0deg將不會有任何效果，而50deg會相應的轉動撥盤。在這種情況下，nettuts 的標誌將採...