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的更多相关文章

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

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

  2. CSS 设置背景透明度,不影响子元素

    由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...

  3. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  4. 当fixed元素相互嵌套时,父元素会影响子元素的层叠关系,最好不要嵌套使用fixed

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...

  5. 父元素高度不确定,子元素左右等高的div布局

    上一篇介绍了实现几个div并排居中点这里,但是指定了高度,这篇文字主要说一下父元素高度不确定,子元素左或右高度不确定且高度相同布局div盒子 三个div盒子如下 <div class=" ...

  6. JAVA读取XML文件并解析获取元素、属性值、子元素信息

    JAVA读取XML文件并解析获取元素.属性值.子元素信息 关键字 XML读取  InputStream   DocumentBuilderFactory   Element     Node 前言 最 ...

  7. 父div的透明度不影响子div透明度

    在设置div的透明度的时候如果设置了父div的透明度(opacity=0.8),那么子div的透明度也随着改变了,并且设置子div的透明度不起作用. 这种情况下可以使用rgba来设置父div的透明度: ...

  8. CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

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

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

随机推荐

  1. django 更新 模板语言

    Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 在Django的模板语言中按此语法使用:{{ 变量名 ...

  2. VB ListView罗列图片

      一开始听到job的要求,还真不知道如何下手,用Gridview?好像有做不到把图片show出来的.在网上搜索一遍,发现原来是ListView与Imglist的结合应用. 看设计: Private ...

  3. javascript日期相减,求时间差

    //计算时间差 var from_date = new Date(from_time); var end_date = new Date(end_time); var time_different = ...

  4. python学习中的第一个例子

    搭建python 先学习下当小白鼠 1 看下自己的python版本 python -v 2 然后,用pip安装开发Web App需要的第三方库: 异步框架aiohttp: pip3 install a ...

  5. Latex 箭头、下标、符号上下写文字、正方形和三角形

    0. hat   $abc\hat def$  $ab\widehat{cde}f$ 1. 箭头上的文字    $\underrightarrow{\text{你的文字}}$  ($A \xlefta ...

  6. SHOW CREATE语句

    show create table tablename 查看某表的建表语句 同理查看存储过程 show create procedure  sp_name

  7. vue基础——vue介绍

    声明式渲染——文本插值: 数据和dom已经进行了关联,所有东西都是响应式的 index.html <div id="app0"> {{message}} </di ...

  8. delphi 中判断对象是否具备某一属性

    Uses   TypInfo;         {$R   *.dfm}         procedure   TForm1.Button1Click(Sender:   TObject);     ...

  9. 扩展C#与元编程(二)

    如果你对Windows Workflow Foundation(WF)一无所知,当看到扩展C#与元编程(一)中由MW编译器生成的FirstLook.mw.cs时,也许这么在想:我KAO,这是C#版的汇 ...

  10. tensorflow学习资料

    tensorflow学习资料 http://www.soku.com/search_video/q_tensorflow?f=1&kb=04112020yv41000__&_rp=1a ...