都知道,在alpha滤镜下,背景透明了,里面的文字也会跟随透明,我们可以设置内容的position为relative可以解决这个问题
但是在position为absolute这么做却没有效果,怎么解决呢,看代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>alpha</title> <style type="text/css"> .alpha { 100px; height:100px; background-color:red; display:block; opacity: 0.35; filter: "alpha(opacity=35)"; filter: alpha(opacity=35); -moz-opacity: 0.35; } </style> </head><body> <div class="alpha"> <div>文字显示</div> </div> </body> </html>
这样显示的文字也是0.35的透明,修改代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>alpha</title> <style type="text/css"> .alpha { 100px; height:100px; background-color:red; display:block; opacity: 0.35; filter: "alpha(opacity=35)"; filter: alpha(opacity=35); -moz-opacity: 0.35; } </style> </head> <body> <div class="alpha"> <div style="position:relative;"> 文字显示</div> </div> </body> </html>
文字没有了不透明效果
这没什么,也不是我要说的重点
看这个
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .alpha50 { opacity: 0.5; filter: "alpha(opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; } .box { 173px; height: 163px; display: block; background-color: orange; } .absolute { position: absolute; 173px; height: 30px; margin-top: 133px; } .relative { position: relative; } </style> </head> <body> <form id="form1" runat="server"> <div> <div class="box"> <div class="absolute alpha50"> <div class="relative">显示文字</div> </div> </div> </div> </form> </body> </html>
虽然设了relative,但文字还是透明的
反复试验 我发现修改代码顺序可以解决这个问题
如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .alpha50 { opacity: 0.5; filter: "alpha(opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; } .box { 173px; height: 163px; display: block; background-color: orange; } .absolute { position: absolute; 173px; height: 30px; margin-top: 133px; } .relative { position: relative; } </style> </head> <body> <form id="form1" runat="server"> <div> <div class="box"> <div class="absolute"> <div class="alpha50"> <div class="relative">显示文字</div> </div> </div> </div> </div> </form> </body> </html>
先absolute再alpha可以解决在absolute下设置relative的不透明度
ok