div容器内文字不透明背景透明实现方法全兼容

  • 时间:2018-10-24 08:03 编辑: 来源: 阅读:504
  • 扫一扫,手机访问
摘要:有的时候做网站我们需要实现这样的一种功能,在一个DIV容器内文字不透明背景透明,这个代码需要如何书写呢?看下面代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl

有的时候做网站我们需要实现这样的一种功能,在一个DIV容器内文字不透明背景透明,这个代码需要如何书写呢?看下面代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明,文字不透明</title>
<style>
*{
    padding: 0;
    margin: 0;
}
body{
  padding: 50px;
  background: url(img/bg.png) 0 0 repeat;
}
.demo{
  padding: 25px;
  background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
}
.demo p{
  color: #FFFFFF;
}
@media \0screen\,screen\9 {/* 只支持IE6、7、8 */
  .demo{
    background-color:#000000;
    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>

完美实现DIV容器内文字不透明背景透明。

  • 全部评论(0)
最新发布的资讯信息
【CMS学院|PHPCMS】PHPCMS V9搜索结果按发布时间或ID排序的方法(2019-01-16 09:37)
【CMS学院|PHPCMS】phpcms v9 thumb(缩略图) 函数说明(2019-01-16 09:36)
【建站教程|故障问题】is环境下字体图标不显示的原因与解决方法(2019-01-15 09:08)
【CMS学院|DEDECMS】dedecms织梦搜索结果页面调用自定义字段的方法(2019-01-15 08:52)
【CMS学院|DEDECMS】织梦ajax动态获取会员总数(2019-01-15 08:37)
【CMS学院|DEDECMS】织梦tag标签及自定义字段里输入英文逗号后不见了(2019-01-14 08:51)
【CMS学院|DEDECMS】织梦漏洞修复 v 5.7 sp2 RemoveXSS漏洞修复(2019-01-14 08:48)
【CMS学院|DEDECMS】如何去掉DedeCMS评论中的手形和表情图片(2019-01-11 09:02)
【CMS学院|DEDECMS】织梦开启绝对路径后软件模型下载地址填https://开头的资源下载出错(2019-01-10 08:45)
【CMS学院|DEDECMS】织梦自定义输出热门搜索关键词(2019-01-09 09:22)