改变父元素的透明度，不影响子元素的透明度—css
1、如果我们给父元素添加opacity:0.4后，子元素的red颜色也变成了0.4的透明度，
例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>透明度写法</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.wrap{
margin:200px auto;
width:200px;
height:200px;
background:black;
opacity:0.4;
position:relative;
}
.inner{
position:absolute;
width:100px;
height:100px;
background:red;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
</body>
</html>结果：
**解决方法：
父元素的透明度用rgba的方法
background:rgba(0,0,0,0.4);**
解决的后的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>透明度写法</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.wrap{
margin:200px auto;
width:200px;
height:200px;
position:relative;
background:rgba(0,0,0,0.4);
}
.inner{
position:absolute;
width:100px;
height:100px;
background:red;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
</body>
</html>结果：
解决方案2：有兼容性问题；
利用CSS中的opacity属性可以实现一些视觉效果，但是父元素设置透明属性会被子元素继承，这是不想见到的，于是通过一些设置解决这个问题。
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;解决办法是利用CSS3中的rgba（）进行设置，便不会被被子元素继承，同时为了兼容IE7、IE8等浏览器，需要将子元素的positon属性设置为relative，使其脱离流。
position:relative;
改变父元素的透明度，不影响子元素的透明度—css的更多相关文章
- CSS中如何设置父元素透明度不影响子元素透明度
原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...
- CSS 设置背景透明度，不影响子元素
由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素． 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...
- 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...
- 当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...
- 父元素高度不确定，子元素左右等高的div布局
上一篇介绍了实现几个div并排居中点这里,但是指定了高度,这篇文字主要说一下父元素高度不确定,子元素左或右高度不确定且高度相同布局div盒子 三个div盒子如下 <div class=" ...
- JAVA读取XML文件并解析获取元素、属性值、子元素信息
JAVA读取XML文件并解析获取元素.属性值.子元素信息 关键字 XML读取 InputStream DocumentBuilderFactory Element Node 前言 最 ...
- 父div的透明度不影响子div透明度
在设置div的透明度的时候如果设置了父div的透明度(opacity=0.8),那么子div的透明度也随着改变了,并且设置子div的透明度不起作用. 这种情况下可以使用rgba来设置父div的透明度: ...
- CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体
CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...
- 使用RGBa和Filter实现不影响子元素的CSS透明背景
点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所 ...
随机推荐
- PHP mysqli_free_result()与mysqli_fetch_array()函数
mysql_free_result() 仅需要在考虑到返回很大的结果集时会占用多少内存时调用.在脚本结束后所有关联的内存都会被自动释放. 在我们执行完SELECT语句后,释放游标内存是一个很好的习惯. ...
- 小朋友学C语言（8）
求圆周率 (一)圆周率简介 圆周率(Pi)是圆的周长与直径的比值,一般用希腊字母π表示,是一个在数学及物理学中普遍存在的数学常数.π也等于圆形之面积与半径平方之比.是精确计算圆周长.圆面积.球体积等几 ...
- serializers 序列化器里面进行 校验等
一.第一版(一般不用) # 声明序列化器from rest_framework import serializersfrom djangoDome.models import Book class P ...
- Java基本类型与运算
问题及答案来源自<Java程序员面试笔试宝典>第四章 Java基础知识 4.4基本类型与运算 1.Java提供了哪些基本数据类型? Java一共提高了八种原始的数据类型:byte.shor ...
- selenium+python自动化90-unittest多线程执行用例
前言 假设执行一条脚本(.py)用例一分钟,那么100个脚本需要100分钟,当你的用例达到一千条时需要1000分钟,也就是16个多小时... 那么如何并行运行多个.py的脚本,节省时间呢?这就用到多线 ...
- 网络命令ping/netstat/ipconfig/arp/tracert/nbstat
1.1 Ping命令的使用 ping检测网络故障步骤: ping 127.0.0.1 ping环绕指针检测是否在计算上anzhaung了TCP/IP协议及配置是否正确 ping本机IP这个命令被被送到 ...
- ngnix配置thinkphp5隐藏index.php的方法亲测有效
在需要访问的域名的conf文件中,比如 vim /etc/nginx/.com.conf location / { // …..省略部分代码 if (!-e $request_filename) { ...
- is not on any development teams
is not on any development teams 1)账号正在申请中 2)申请成功后的账号? 加了3个账号,都是这样子的. 1:Xcode>Window> "Org ...
- iTunes 错误 -50
iTunes,给苹果安装软件,这个软件的体验这么差!!! 手机上基本打不开AppStore,用电脑iTunes,经常莫名其妙的错误代码冒出. 速度奇慢无比. error -50 打开iTunes -- ...
- 生产者和消费者模式--java设计模式
生产者和消费者: 就犹如在快餐店点餐一样,有多个打饭的,有不定时的人来买饭,买饭的人从快餐店自动取餐,如果快餐的库存数量达到下限值时,自动启动打饭的,补充盒饭. 通过while循环的方式,传入变量is ...