纯色半透明
我们常常需要这样的效果:半透明的纯色背景浮动着高亮不透明的文本。当然,通常我们有两种实现方式,总结如下——
1> 第一种实现方式:使用opacity和filter: alpha(opacity=XX)
div.x { width: 500px; height: 50px; background-color: black; /* 这种方式使得里面的内容也呈现为半透明 */ filter: alpha(opacity=70); /* 针对IE */ opacity: 0.7; /* 针对非IE */ /* 在这里,我们当然可以使用双div叠加的方式达到使得里面的内容不发生透明 */ }
2> 第二种实现方式:使用RGBA和ARGB
div.y { width:500px; height:50px; /* 通用浏览器用rgba */ background-color: rgba(0, 0, 0, 0.7); /* ie用ARGB */ /* 其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 * RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 * AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。 * 取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。 */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000); color: white; }
OK,用着都还不错。倾向于用哪个,随你而定。