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

  • 时间:2018-10-24 08:03 编辑: 来源: 阅读:610
  • 扫一扫,手机访问
摘要:有的时候做网站我们需要实现这样的一种功能,在一个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学院|DEDECMS】DedeCms织梦动态获取会员总数(2019-03-18 09:10)
【建站教程|建站技巧】bootstrap在移动浏览器下响应式不起作用的解决方法(2019-03-18 09:08)
【CMS学院|WORDPRESS】WordPress文章页原创Meta声明标注(2019-03-15 09:17)
【CMS学院|WORDPRESS】WordPress更改JPEG图片的压缩质量的实现办法(2019-03-15 09:12)
【源码学院|服务器】宝塔面板优化服务器加快网站加载速度(2019-03-14 09:02)
【建站教程|辅助文档】ThinkPHP框架中使用Memcached缓存数据的方法(2019-03-13 08:32)
【CMS学院|DEDECMS】织梦DedeCMS模板中可以使用的公共函数(2019-03-07 08:39)
【CMS学院|DEDECMS】织梦channel标签currentstyle样式无效不起作用(2019-03-07 08:30)
【CMS学院|DEDECMS】织梦如何让封面频道作为最终列表栏目和分页(2019-03-01 08:24)
【CMS学院|DEDECMS】织梦开启错误信息提示方法方便织梦程序调试(2019-03-01 08:19)
底部广告
网站首页 | 关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明
CopyRight 2004-2017 淘源码网 | 苏ICP备12026353号-3