學生就可以看懂的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屬性.
*請認真填寫需求信息,我們會在24小時內與您取得聯系。