用CSS来实现背景透明文字不透明全兼容的方法

 分类:div+css教程时间:2016-11-25点击:

 在div+css网站布局中,经常要用到背景透明,所在背景的文字内容也会跟着透明,但有时文字需求是不透明的,确实让我们web前端开发者很苦恼,解决这个问题方法有二,第一背景用图片,第二那就是用css来解决。

 1.背景透明,文字也透明,以下代码我们常用但不是我们想要的


filter:alpha(opacity=50); //IE滤镜,透明度50%

-moz-opacity:0.5; //Firefox私有,透明度50%

opacity:0.5; //其他,透明度50%

2.背景透明,文字不透明,这是我们想要的结果,全兼容各大浏览器的方法

  先看下效果图:

用CSS来实现背景透明文字不透明全兼容的方法

例子代码如下:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明,文字不透明</title>
<style>
*{padding:0;margin:0;}
body{padding:50px;}
.demo{padding:25px;background-color: rgba(0,0,0,0.5);} /* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
.demo p{color: #FFFFFF;}
/*征对IE9以下浏览器做兼容性处理*/
@media \0screen\,screen\9 {
.demo{background-color:#000000; /* 只支持IE6、7、8 */
filter:Alpha(opacity=50);
position:static; /* IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值 */
*zoom:1; /* 激活IE6、7的haslayout属性,让它读懂Alpha */
}
.demo p{position:relative;} /* 设置子元素为相对定位,可让子元素不继承Alpha值 */
}
</style>
</head>
<body>
<div class="demo">
<p>背景透明,文字不透明</p>
</div>
</html>

 点击查看例子

除注明外的文章,均为来源:(QQ:1917843637),转载请保留本文地址!
原文地址:
  • 关注下头条号后,加下微信【yes2016yes99】将分享给你一份前端资料!
  • 立即关注