背景透明,文字不透明效果

1 background-color: #24BA09;
2 color: #fff;
3 filter: alpha(opacity=80);/*为了实现ie8透明度*/
4 zoom: 1;/*为了让浏览器识别alpha*/
5 background-color: rgba(36, 186, 9, .8);

background-color: rgba(36, 186, 9, .8);可以实现背景透明文字不透明,但是不兼容ie8。

在ie8中要实现透明度要通过background-color: #24BA09;filter: alpha(opacity=80);

在标准浏览器中background-color: rgba(36, 186, 9, .8);会覆盖background-color: #24BA09;并不会有冲突

以上代码虽然实现了透明度,但是ie8中还是不能文字不透明,解决方案如下:

在设置透明度的元素上加样式:

position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */

在不希望透明的元素上设置样式:

position: relative;/* 设置子元素为相对定位,可让子元素不继承Alpha值 */

以上即可实现。

以上通过学习白树的博客得知。

*以上图片右键--在新页面打开就可以看清楚代码了

原文地址:https://www.cnblogs.com/yueliangcl/p/6831583.html