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值 */

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

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

以上即可实现。

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

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

 

相关文章:

  • 2021-12-26
  • 2021-11-17
  • 2021-11-17
  • 2022-01-29
  • 2021-07-08
  • 2021-12-04
  • 2021-06-23
  • 2021-11-29
猜你喜欢
  • 2021-10-14
  • 2021-12-11
  • 2021-12-05
  • 2021-07-19
  • 2021-11-17
  • 2021-12-27
  • 2021-12-27
相关资源
相似解决方案