div半透明 文字不透明

 分类:div+css教程时间:2016-12-26点击:

 近日有个网友问我,怎么样能实现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来实现背景透明文字不透明全兼容的方法

除注明外的文章,均为来源:(QQ:1917843637),转载请保留本文地址!
原文地址:
  • 关注下头条号后,加下微信【yes2016yes99】将分享给你一份前端资料!
  • 立即关注