关于层半透明的问题

原创于 2013-04-25 16:44:59 发布 · 639 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS

本文介绍了一种使用CSS来创建半透明层的方法。通过绝对定位和设置透明度属性，可以在不借助额外图片的情况下轻松实现这一效果。代码示例中详细展示了如何定义这种半透明背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搞了很久，后来在网上看到这个方法不错

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>CSS层的半透明效果 - /</title>

<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<style type="text/css">

body {background:url('/images/logo.gif');}

#box {position:relative; overflow:hidden; z-index:1; width:462px; margin:0 auto; border:1px solid #333;height:300px;paddign:30px;}

#box #opa {position:absolute; z-index:-1; width:100%; height:100%; top:0; left:0; background:#fff; filter:alpha(opacity=86); opacity:0.6;}

* #box #opa {height:10000px; height:10000px;}

</style>

</head>

<body>

<div id="box"><center><br><br><br>这个层是不是半透明了呢？</center><div id="opa"></div></div>

</body>

</html>