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

  • 时间:2018-10-24 08:03 编辑: 来源: 阅读:652
  • 扫一扫,手机访问
摘要:有的时候做网站我们需要实现这样的一种功能,在一个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】织梦新增文章和编辑文档时自动保存文章实现办法(2019-03-26 08:32)
【CMS学院|DEDECMS】织梦DedeCMS让后台模板列表按字母排序方法(2019-03-26 07:59)
【CMS学院|DEDECMS】织梦DedeCms列表内容页栏目高亮 当前栏目调用二三级栏目(2019-03-26 07:54)
【CMS学院|DEDECMS】DedeCms会员中心调用会员最后登录时间和IP(2019-03-25 10:50)
【CMS学院|DEDECMS】DedeCms织梦联动地区后台显示为数字的正确解决方法(2019-03-25 10:48)
【建站教程|建站技巧】Html5 视频自动播放 HTML5页面中插入MP4视频并自动播放(2019-03-25 10:46)
【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)
底部广告
网站首页 | 关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明
CopyRight 2004-2017 淘源码网 | 苏ICP备12026353号-3