11.11是公司成立的日子，16歲啦，我呢3歲半，感謝公司給了這樣一個平台，讓我得以學習和成長，這裡祝願公司發展越來越好~
進入主題，每年11月11号是光棍節，産生于校園，本來隻是一流傳于年輕人的娛樂性節日，以慶祝自己仍是單身一族為驕傲，而如今是各大商家以脫光為由打折促銷的時期，成為了所謂的”購物節“，雙11也算了，後面還要搞雙12，不得不吐槽下。
于是呢，熬夜加班做了11.11的活動，在pc端遇到了透明背景和透明圖檔的問題，其實以前也遇到過，隻是沒有總結起來，就忘記了，這次又撞牆了，必須記錄下來，一來給自己做個小總結，提個醒，最近變懶了，再不努力就要倒挂了；二來是因為在網絡上并沒有完整的解決方案，希望可以幫助到遇到此類問題的朋友，今天主要講解背景透明的解決方案，共勉~
重點内容入口：
<a href="http://www.cnblogs.com/peunzhang/p/4089894.html#rgba_bug">ie6和部分ie7核心的浏覽器會讀懂rgba</a>
<a href="http://www.cnblogs.com/peunzhang/p/4089894.html#ie_filter_bug">ie專屬濾鏡 filter:alpha的相容處理</a>
<a href="http://www.cnblogs.com/peunzhang/p/4089894.html#solve">背景透明，文字不透明全相容方案</a>
測試浏覽器：
virtie6、虛拟機下xp的ie6、純正ie8、純正ie8下qq浏覽器、win7下的ie 9.0.32 、win8下的ie 10.0.21、chrome 38.0 、qq浏覽器8.0-ie10.0.5、safari 5.1.7、opera 25.0
我們平時所說的調整透明度，其實在樣式中是調整不透明度，如下圖所示例：
打開ps，在圖層面闆上，可以看到設定圖層整理不透明度的菜單，從 0% （完全透明）到 100%（完全不透明）。
實作透明的css方法通常有以下3種方式，以下是不透明度都為80%的寫法
ie專屬濾鏡 filter:alpha(opacity=x)，x 的取值從 0 到 100，如filter:alpha(opacity=80)
相容性：ie6、7、8不支援，ie9及以上版本和标準浏覽器都支援
使用說明：設定opacity元素的所有後代元素會随着一起具有透明性，一般用于調整圖檔或者子產品的整體不透明度
使用opacity後整個子產品都透明了，展現如下：
那麼使用opacity實作《背景透明，文字不透明》是不可取的。
使用說明：設定顔色的不透明度，一般用于調整background-color、color、box-shadow等的不透明度。
在background-color中使用rgba，标準浏覽器中，背景透明，文字不透明，展現如下：
很奇葩的是，ie6和部分ie7核心的浏覽器(如qq浏覽器)會讀懂rgba，解析後顔色為透明，其實應該是null
那麼使用opacity實作背景透明，文字不透明是可取的。
使用說明：ie浏覽器專屬，問題多多，本文以設定背景透明為例子，如下：
僅支援ie6、7、8、9，在ie10版本被廢除
在ie6、7中，需要激活ie的haslayout屬性(如：*zoom:1或者*overflow:hidden)，讓它讀懂filter:alpha
在ie6、7、8中，設定了filter:alpha的元素，父元素設定position:static(預設屬性)，其子元素為相對定位，可讓子元素不透明
上以上3點分析可知，設定透明背景文字不透明，可采用的屬性有rgba和ie的專屬濾鏡filter:alpha，其相容性如下圖所示：
針對ie6、7、8浏覽器，我們可以采用fiter:alpha，針對标準浏覽器我們采用rgba，那麼問題來了，ie9浏覽器2個屬性都支援，一起使用會重複降低不透明度...
ok，所有問題都解決了，全部代碼如下：
<a href="http://files.cnblogs.com/files/peunzhang/%e8%83%8c%e6%99%af%e9%80%8f%e6%98%8e%ef%bc%8c%e6%96%87%e5%ad%97%e4%b8%8d%e9%80%8f%e6%98%8e%e7%9a%84%e7%a0%94%e7%a9%b6%e5%92%8c%e4%bd%bf%e7%94%a8.zip" target="_blank">下載下傳demo</a>
可能很多同學會覺得很複雜，為什麼不直接用兩個div放在同一個位置就行了，一個不透明div，一個文字div，很簡單的解決問題，這也是好個方法，但是需要寫絕對定位或負margin，并出現空内容的div，而且這是這種方法在有些場景下也會顯得複雜，如下示例，滑鼠經過商标後展現展現透明的提示文案，就需要控制2個div啦~
一點思路，如果疑問，歡迎大家留言交流~
作者：白樹