容器透明与内部对象

80酷酷网    80kuku.com

  对象|透明 讨论用滤镜定义容器透明后,有可能的几种问题和解决方案。

为了更突出内部对象的文字效果,例子的容器背景和页面底色为默认白色,如果给容器定义彩色底能更突出透明效果。左边为当前效果,右边为初始状态,可以做对比,初始风格定义:
div { width:100px; height:100px; padding:10px; border:1px #000 solid;}

1. 容器初始状态
<div>文字状态测试<br />www.rexsong.com</div>
2. 容器30%透明

此时容器和内部对象都为30%透明,注意英文有重影。
<div />www.rexsong.com</div>
3. 容器30%透明,内部对象不可层叠

IE6环境下,定义内部对象不可层叠,可以不受外层容器的透明定义控制。
<div />www.rexsong.com</span></div>
4. 容器100%透明

当开启了cleartype时,100%透明不等于没有定义透明度,这种情况内部对象为中文时无效果差别,英文还是会有重影。
<div />www.rexsong.com</div>
5. 容器100%透明,并定义背景色

IE6环境下,当开启了cleartype使用滤镜时,内部对象英文会出现重影,可以通过定义容器背景色来解决,任何透明度都一样。
<div background:#fff;">文字状态测试<br />www.rexsong.com</div>
Demo

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: