整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          css基礎快速入門-19 透明transparent

          css基礎快速入門-19 透明transparent

          學生就可以看懂的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屬性.


          主站蜘蛛池模板: 中文字幕在线观看一区二区三区| 精品香蕉一区二区三区| 国产免费一区二区三区不卡 | 精品无码人妻一区二区三区品| 精品久久久久久中文字幕一区| 国产成人精品无码一区二区| 国产伦精品一区二区三区在线观看| 久久久91精品国产一区二区| 国产精品 视频一区 二区三区| 国产品无码一区二区三区在线| 日韩一区二区三区无码影院| 蜜桃传媒视频麻豆第一区| 国产精品污WWW一区二区三区| 国产一区二区福利久久| 精品国产精品久久一区免费式 | 熟女精品视频一区二区三区| 国产一区二区三区免费观在线 | 久久久久国产一区二区三区| 日韩有码一区二区| 日韩精品一区在线| 国产视频一区二区| 免费人人潮人人爽一区二区| 波多野结衣中文字幕一区| 在线一区二区三区| 国产一区二区视频免费| 无码人妻AⅤ一区二区三区水密桃| 日本一区二区三区在线看 | 国产成人av一区二区三区在线观看| 中文字幕精品一区二区2021年| 精品一区二区三区在线播放视频| 亚洲美女一区二区三区| 亚洲国产激情在线一区| 亚洲日韩中文字幕无码一区| 无码人妻精品一区二区三区久久久 | 丰满爆乳无码一区二区三区| 国产日韩视频一区| 国产福利电影一区二区三区,免费久久久久久久精 | 国产一区二区三区视频在线观看| 美女视频免费看一区二区| 国产精品第一区第27页| 日韩人妻无码一区二区三区久久99 |