因为专注,所以专业
2005 - 2020

css控制实现div半透明文字不透明

时间:2020-06-29 23:18:38    作者:八叔模板堂
近日有个网友问我,怎么样能实现div半透明 文字不透明的效果呢?几天前好像我写一个用css3来做的,但他写的效果不管怎么调试都是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>

最终的效果如下:

 如果还没解决你的问题,请看这篇文章:用CSS来实现背景透明文字不透明全兼容的方法

赞(0
免费拨打  111-1111-1111
免费拨打  111-1111-1111免费拨打 111-1111-1111
微信二维码
手机二维码
返回顶部
返回顶部返回顶部