最近很火爆的透明廣告在pc上的實現，解讀你沒用過的透明度。

前言：不知道前段時間很火爆的背景透明廣告你是否注意過，當時我第一次發現時就感到很新穎，理所當然廣告效果很不錯，不過當時是在手機上無聊重新整理聞看見的，目前在pc上我還沒有見過，或許有，或許沒有，但我覺得我有必要將它分享出來。

首先，可能我們很多小夥伴還沒有看過這個例子，所以先來看看我做的一個簡單的效果圖

怎麼樣，覺得效果還不錯的繼續往下看。

那麼，我們怎麼做這樣一個效果呢？答案是很簡單的，我們甚至不需要寫js程式碼便可以實現這樣一個酷炫的效果，我們只需要用到兩個屬性，opacity與background。

不著急的小夥伴可以先自己想一想如何實現，然後再看下面的程式碼解釋。

首先我們需要寫一個div，實現一個整體的佈局。

效果很簡單，就是一張圖片而已。

注意，圖片不是在打廣告，自己隨便去網上搜一張圖片即可哦。

我們再在div下巢狀一個新聞的div，新聞div內再巢狀五個新聞版面。完整程式碼如下：

有興趣的可以去自己設定一下樣式，改進的地方還有很多哦。

現在我們就需要在我們打廣告的div裡設定透明度了。

這樣，效果就完全出來了，不過這時候你會發現一個問題，我們寫在廣告div裡的廣告詞也消失了，很明顯它也隨著透明度的設定變得透明瞭，這個副作用我們是不想要的，那麼我們怎麼解決它呢? 我們首先想到在廣告的div塊裡再巢狀一個用於顯示文字的div，並且將它的透明度設定為1，結果是沒有效果，這裡解釋一下為什麼會沒有效果，因為透明度的改變是基於它本身的的顏色透明度所決定的，也就是說，在父集透明度為0的情況下，子集的透明度的基礎為0；那麼無論它怎麼改變，透明度都為零。 這個方法不行，那我們怎麼解決呢？這個感興趣的可以自己去試試方法。提示：父集不行可是試試兄弟集。

最後，到這就結束了，希望大家有所收穫，有時候技術不在於精，而在於如何去應用。