div半透明 文字不透明

Joker • • 前端笔记 • 257 阅读

 近日有个网友问我，怎么样能实现div半透明 文字不透明的效果呢？几天前好像我写一个用css3来做的，但他写的效果不管怎么调试都是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>

最终的效果如下：

div半透明 文字不透明

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

版权声明：
作者：Joker 链接：https://456787.xyz/archives/2209
文章版权归作者所有，转载请注明出处。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>