一 透明边框
在元素上设置透明边框会在边框下边显示元素自己的背景.
在下面的例子中,我们使用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属性.