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