html 透明覆盖层,CSS层透明实现方法

本文实例讲述了CSS层透明实现方法。分享给大家供大家参考。具体分析如下：

这个代码段是演示用CSS控制一个DIV层的透明效果，大家可以看到平铺的背景已经显现出来，实际上比较简单就可以实现，就是用CSS控制一个DIV层，定义样式表时加入filter:alpha(opacity=65);这句代码，里面的值是用来控制透明度的，你可以试着改变它的值，会有不同的透明效果。

复制代码

代码如下:

CSS定义层的透明效果

body {

font-family: Arial, Helvetica, sans-serif;

line-height: 1.5;

background: url(http://files.jb51.net/file_images/article/201505/2015513164008952.jpg);

color: #fff;

width: 770px;

margin: 0 auto;

padding: 50px;

}

h1,h2 {

color: #77AFC7 !important;

margin-bottom: 0;

line-height: 1.2em;

}

p {

margin-top: 0;

}

a {

color: #aaa;

}

a:hover {

color: #FFF !important;

text-decoration: none;

}

code {

background-color: #100;

padding: 0.2em 0.5em;

display: inline-block;

}

#wrapper {

overflow: hidden;

}

.overlay {

position: absolute;

top: 0;

bottom: 0;

left: 0;

width: 100%;

background: #000;

opacity: 0.65;

-moz-opacity: 0.65;

filter:alpha(opacity=65);

}

.container {

position: relative;

float: left;

}

.content {

position: relative;

float: left;

}

#column-1 {

width: 500px;

}

#column-2 {

width: 250px;

margin-left: 20px;

float: left;

display: inline;

}

#column-1 .content {

padding: 20px;

width: 460px;

}

#column-2 .content {

padding: 10px;

width: 230px;

}

* html #column-1 .overlay { height: expression(document.getElementById("column-1").offsetHeight); }

* html #column-2 .overlay { height: expression(document.getElementById("column-2").offsetHeight); }

透明的网页.

IE6,FF测试通过

这是一个透明的网页，还不错吧？实际上是用CSS控制DIV层的半透明状态，这样会使平铺的背景显现出来，看上去酷了不少。

By CC-Public Domain

A sidebar

这是右侧，你可以尝试修改一下。