由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素.

解决方法:

1> 使用 RGBA

Example

 .classname {
/* RGBa, 透明度0.6 */
background: rgba(0, 0, 0, 0.6);
}

2> 使用 opacity, 设置一个背景DIV,此DIV使用绝对布局

Example

 <div class="demo">
<div class="demo-bg"></div><!-- 透明背景 -->
<div class="demo-txt">Content here</div><!-- 不透明文字 -->
</div>

Demo

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding: 50px;
background: url(http://static.cnblogs.com/images/logo_small.gif) 0 0 repeat;
} .demo{
width: 200px;
height: 200px;
position: relative;
}
.demo-bg{
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: 200px;
height: 200px;
background-color:#000000;
filter:Alpha(opacity=50);
background-color: rgba(0,0,0,0.5);
}
.demo-txt{
position: relative;
z-index: 1;
color: #FFFFFF;
}
</style>
</head>
<body> <div class="demo">
<div class="demo-bg"></div><!-- 透明背景 -->
<div class="demo-txt">Content here</div><!-- 不透明文字 -->
</div> </html>

3> 建立一个24位PNG背景图片

不推荐,IE下24位PNG图透明时引起的内存泄漏.

SEE ALSO

CSS实现背景透明完美解决方案
CSS实现背景透明,文字不透明,兼容所有浏览器

CSS 设置背景透明度,不影响子元素的更多相关文章

  1. CSS中如何设置父元素透明度不影响子元素透明度

    原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...

  2. css改变背景透明度【转】

    兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0. ...

  3. css改变背景透明度

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码:.transparent{filter:alpha(opacity=90); -moz-opacity:0.9; -khtml- ...

  4. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  5. css 设置背景图片模糊,内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

  6. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

  7. 使用RGBa和Filter实现不影响子元素的CSS透明背景

    点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所 ...

  8. 改变父元素的透明度,不影响子元素的透明度—css

    1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> ...

  9. CSS只改变背景透明度,不改变子元素透明度

    一般情况下,我们可以使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即使对子元素重新定义也没有用,例如: <div style="opacit ...

随机推荐

  1. laravel 获取 当前url 的方法, 有的是获取 全部url 有的只获取 主页其他 部分

    1. 使用 Request 类: $url = Request::getRequestUri(); 2. 使用 $request 对象: public function show(Request $r ...

  2. mysql优化limit分页

  3. php取整函数ceil,floor,round,intval函数的区别

    开发过程中,遇到数据处理取整的时候,你会用哪个呢,小涛来介绍一下:PHP取整函数有ceil,floor,round,intval,下面详细介绍一下: 1.ceil — 进一法取整说明float cei ...

  4. 关于datagridview里使用combox的总结

    最近写的程序中需要在DataGridView中使用下拉选择的功能,首选方案是列的ColumnType属性 使用EditingControlShowing事件, if (e.Control is Com ...

  5. percona-toolkit中在线ddl

    percona-toolkit中在线ddl percona-toolkit工具提供了一组用于mysql操作的工具,比如主从复制,在线更改mysql表ddl等 一.安装1.安装perl(略)2.BI&a ...

  6. mysql_索引原理及优化

    思考: 我们知道mysql最好的数据存储量级是百万级别,是的往往在百万级别或者几十万级别就会出现慢查询(我对慢查询的定义是大于1秒),几年前我所在的一个做pos机支付的联机交易的核心系统组,当时就做过 ...

  7. "undefined method `root' for nil:NilClass" error when using "pod install" 解决办法

    如果pod undate 的时候报错"undefined method `root' for nil:NilClass" error when using "pod in ...

  8. exit和return的区别

     主要有几下几个不同点:     1. return返回函数值,是关键字:exit是一个函数.     2. return是语言级别的,它表示了调用堆栈的返回:而exit是系统调用级别的,它表示了一个 ...

  9. 解决界面有搜索栏时,点击TableView的空白界面,键盘不消失的问题

    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(h ...

  10. visual studio2015从git上clone(克隆)项目

    本文介绍Visual Studio2015从git上clone项目代码的步骤. 1.打开VS2015,进到起始页,打开"团队资源管理器",如下图: 2.点击"克隆&quo ...