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

  • 时间:2018-10-24 08:03 编辑: 来源: 阅读:676
  • 扫一扫,手机访问
摘要:有的时候做网站我们需要实现这样的一种功能,在一个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)
最新发布的资讯信息
【源码学院|PHP技术】PHP随机自动跳转代码(2019-05-21 09:35)
【建站教程|故障问题】Bootstrap在移动端响应式不起作用的解决方法(2019-05-13 09:19)
【CMS学院|DEDECMS】织梦dedecms使用Mysql8.0无法登录后台的解决办法(2019-05-06 09:33)
【CMS学院|DEDECMS】织梦单独调用栏目页友情链接每个栏目调用不同友情链接(2019-05-06 09:31)
【建站教程|建站技巧】微信小程序怎么制作?小程序的特点是什么?(2019-04-23 09:33)
【CMS学院|DEDECMS】织梦后台Call to undefined function make_hash()解决方法(2019-04-22 08:51)
【CMS学院|DEDECMS】织梦会员中心个人空间文档有数据分页条数为0的解决方法(2019-04-22 08:47)
【酷文分享|】SEO优化根本目的及有效的优化技巧(2019-04-19 08:31)
【CMS学院|DEDECMS】织梦一键清空所有数据并让所有id从1开始的操作方法(2019-04-17 09:04)
【建站教程|建站技巧】名被劫持之后有什么后果?有什么好的方法解决?(2019-04-16 09:27)
底部广告
网站首页 | 关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明
CopyRight 2004-2017 淘源码网 | 苏ICP备12026353号-3