明凯博客

关注网站技术,一个特立独行的程序员

CSS实现Div层背景半透明而内容不透明的效果

前几天有一个学弟问我,怎么样能实现Div层背景半透明而内容不透明的效果呢,他写的效果不管怎么调试都是div层里面的内容是透明的。我想了一下,用浮动层可以做到啊,下面是代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<title>透明</title>
<head>
<style>
body{
background: #40ed90;
}
#container {
    color: #154BA0;
    background: #ff0000;
    filter: Alpha(Opacity=10, Style=0);
    opacity: 0.10;
    position: absolute;
    height: 200px;
    width:500px;
    z-index:20;
}
 
#text {
    position: absolute;
    height: 200px;
    width:500px;
    text-align:center;
    z-index:30;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="text">背景半透明但文字不透明</div>
</body>

代码预览

, , ,

相关文章

5 条评论 “CSS实现Div层背景半透明而内容不透明的效果

发表评论

电子邮件地址不会被公开。 必填项已用*标注