學生就可以看懂的css基礎實戰系列，pre標簽里是筆記總結，動手實際操作一下會加強理解。有疑問留言交流哦。

可能比較枯燥，但是再堅持一下，前端知識的大門就會大開了。

方的冬天最怕有風，空氣雖然好了，但是異常的冷，吸幾口冷風感覺肺都結了冰。一大早小白來到辦公室琢磨用戶交互方面的問題，看了幾個網站發現很多網站的彈窗都是自定義的，而且還把彈窗周圍的區域做成了半透明狀，看上去非常不錯。于是小白也準備自己通過css布局一個彈窗試試，一來以后肯定會用上這個功能，二來熟悉一下最近掌握的CSS+HTML布局。

說干就干，小白打開webStrom做起了彈窗的布局。他首先用一個容器layer作為彈窗的容器，然后里面放了窗口容器（dialog），窗口容器里面還包含了三個子容器，分別是標題（layerTitle）、內容區域（layerContent）、按鈕區域（layerBTContainer）。

小白想：“layer要充滿并遮擋整個瀏覽器窗口，而且滾動頁面它還得一直保持遮擋的狀態，把它設置為浮動類型（position:fixed）的容器最合適。里面的dialog需要保持在瀏覽器的最中心位置，因此最好把dialog設置成固定寬度和高度，這樣可以很好的實現居中。”，于是小白先把layer和dialog以及dialog內部的容器設定了一個初步的CSS樣式。

layer的position設置為fixed，上下左右距離都設置成0，就可以達到占用整個窗口。里面的dialog容器小白根據剛學習的CSS溢出法讓dialog上下都居中。dialog如果是絕對定位，設置上下左右距離都為0它會占用整個父容器區域，但是如果CSS中限制了dialog的寬和高并且設置了marin為auto，它就會基于父容器居中。

為了測試transition屬性，小白還把確定按鈕上面設置了一個鼠標移上去以后漸變的效果，做完以后就是這個樣子：

看到布局好的彈窗小白心里非常高興，突然他想到一個問題，這個彈窗背景還沒設置半透明，于是趕緊往layer上增加了opacity:0.5這個半透明屬性，小白滿懷信息的刷新了頁面，當看到結果時小白發現背景和窗口都變成了半透明。

正好這時老朱從小白身邊經過，隨口跟小白說了一句：“小白，你是不是把窗口的父容器設置成半透明了？”

“是啊！父容器背景是黑色，所以我把父容器設置成了半透明！”

“可是父容器設置半透明會對他的子元素產生影響啊，這樣會導致它里面的所有元素都變成半透明，你為啥不給窗口添加一個兄弟容器來實現這個效果呢？”

小白仔細想了想，說道：“哦！我明白了，我可以在layer容器里面放一個跟layer一樣大的容器，這樣就不會沖突了，我再試試！”

不一會小白找到老朱，說道：“我改好了，現在我給dialog添加了一個layerbg容器作為背景層，然后把layer之前的背景色和透明度去掉，放到了新增加的背景層上面，背景層高和寬與layer一樣所以這樣就不會把dialog也變成半透明了。你看看效果。”

老朱說：“嗯！不錯，你現在通過HTML和CSS布局的這個彈窗還能做很多完善，比如出現彈窗時增加一個動畫效果、給它添加一個關閉按鈕或者取消按鈕等等。除了提示功能以外，你現在做的這個還能再進行深入修改，把它變成可以輸入文字的prompt框，點擊確定以后可以對頁面或者數據庫數據進行修改。”

想學H5的朋友可以關注老爐，您的關注是我持續更新《小白HTML5成長之路》的動力！

透明邊框

在元素上設置透明邊框會在邊框下邊顯示元素自己的背景.

在下面的例子中,我們使用rgba將邊框設置為透明,但實際上它們顯示為純灰色.

css代碼:

div.first{ border:20px solid rgba(0,0,0,0); width:200px;position:absolute; top:50px; left:50px; background-color:red;}

效果如下:

下面做下改變將rgba(0,0,0,1),效果如下:

rgba(0,0,0,0.3)效果如下:

通過將background-clip設置為padding-clip,邊框將變為透明.

div.second{border:20px solid rgba(0,0,0,0.5); -webkit-background-clip:padding-box; background-clip:padding-box; width:100%;position:absolute; background-color:green; }

效果如下:

二 層疊的背景圖

css3中支持同時使用多個背景圖片.

通過","逗號分隔可以設置多個背景圖.第一個圖像將出現在頂部,最后一個在底部.

在下面的例子中,我們使用兩個背景圖,并指定背景圖的位置.

css代碼:

div.third{width:400px; height:300px; background-img:url("background-iamge.jpg"),url("before.jpg"); background-position:right top,left bottom;

background-repeat:no-repeat;}

我們可以通過使用background簡寫屬性:

background:url("background-image.jpg") right top no-repeat,url("before.jpg") left bottom no-repeat;

三 opacity屬性

css中的opacity屬性支持為元素增加一個不透明度.

下面對同一張圖片設置多種不同的不透明度.

css代碼:

.img1{ opacity:1;}

.img2{ opacity:0.5;}

.img3{ opacity:.25;}

效果如下:

opacity的值介于(0.0~1.0)之間.0.0表示完全透明,1.0表示完全不透明

要讓opacity兼容所有的ie版本,要使用:filter:alpha(opacity=x)以及opacity屬性.x可以取值:0~100.

x設置為0,表示完全透明,1表示完全不透明.

下邊的例子中,設置元素的透明度為20%;

格式如下:

filter:alpha(opacity=20);

opacity:0.2;

alpha過濾器是一個僅限Microsoft的屬性,不是標準的css屬性.