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

最新推荐文章于 2024-06-15 10:33:41 发布

Litt_J

最新推荐文章于 2024-06-15 10:33:41 发布

阅读量6.3k

点赞数

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

2014年5月18日 MK 前端设计 0 阅读 2932次

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

<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>

代码预览

<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>

Litt_J

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS实现Div层背景半透明而内容不透明的效果

CSS实现Div层背景半透明而内容不透明的效果 2014年5月18日 MK前端设计0 阅读 2932次前几天有一个学弟问我，怎么样能实现Div层背景半透明而内容不透明的效果呢，他写的效果不管怎么调试都是div层里面的内容是透明的。我想了一下，用浮动层可以做到啊，下面是代码：1234567891011121314151617
复制链接

扫一扫