关于CSS中不透明度的设置,除了兼容方面的问题,还有不透明度继承问题,这里只讨论下后者。

那么,

什么时候会发生不透明度继承问题?

当文档结构中有父子嵌套关系的时候,并且父元素有不透明度属性设置时,会发生不透明度继承问题,此时子元素也继承了父元素的不透明度,并且再另外设置子元素不透明度是无效的(如果父元素没有设置不透明度,子元素的设置是有效的)。

下面是相关代码和效果图:

CSS部分:

#parent{
height:400px;
width:500px;
background:green;
opacity:0.3;
filter:alpha(opacity=30);/*兼容IE5.5 IE7 IE8,在IETester下测试IE6并不支持*/
-moz-opacity:0.3;/*一些老版本Mozzila*/
-khtml-opacity:0.3;/*一些老版本Safari*/
}
#child{
height:100px;
width:100px;
background:red;
}

DOM结构部分:

<div id="parent">
<div id="child"></div>
</div>

效果图:
图一            图二

图一为设置不透明度后的效果,图二为没设置透明度的效果,可以看到,子元素child也具有了一定的透明度。

在实际应用中,我们有时希望的去是让底层看起来有透明效果,而让上层的元素仍为不透明。

那么,

该怎么解决?

1、使用具有透明效果的图片来代替background效果。

2、将父子元素的嵌套关系改为兄弟关系,并用绝对定位及z-index来实现。

如果还有其他方法的话,积极留言哟~

CSS中不透明度继承问题的处理的更多相关文章

  1. css中的继承、层叠、样式优先级机制

    一.继承与层叠:

  2. CSS中line-height继承问题

    在CSS中,line-height属性用于设置多行元素的空间量,比如文本.对于块级元素,它指定元素行盒的最小高度.对于非替代的inline元素,它用于计算行盒的高度. 语法 /* Keyword va ...

  3. css 中可以继承的属性

    CSS中可以和不可以继承的属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到 ...

  4. css中可以继承的属性

    声明 : 本文源于https://www.cnblogs.com/thislbq/p/5882105.html CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该 ...

  5. CSS中文本继承情况

    无继承性的属性 http://www.cnblogs.com/thislbq/p/5882105.html   vertical-align:  垂直文本对齐   CSS中文本可以继承父级样式   体 ...

  6. 举例详解CSS中的继承

    CSS的继承是由所使用的样式属性定义的.换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的.什么是CSS继承 每一个元 ...

  7. CSS中的继承

    继承:子元素继承父元素的样式,但是并不是所有属性都是默认继承的. 通过文档中的 inherited:yes 来判断属性是否可以继承,关于继承可以参见css的继承关键字: 一.无继承性的属性 1.dis ...

  8. 关于css中透明度继承的问题

    今天工作中发现了一个问题,透明度的继承问题,如下图所示: 容器div2就“继承了”外面容器div1的透明度,也变成了70%的透明.容器里面的字体颜色和图片都“继承”了div1,具体代码如下: 可是设计 ...

  9. CSS中可以继承和不可继承的常见属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

随机推荐

  1. Windows 上 Nginx 路径的陷阱

    第一次用 Nginx 配置 Vhosts. 使用了 Windows 路径 C:\ww\fa\public,没有问题. 我以为 Nginx 的高级特性. 后来要建了一个 Vhosts,发现死活进不了. ...

  2. vuex 知识点

    Action 类似于 mutation,不同在于: 1.Action 提交的是 mutation,而不是直接变更状态. 2.Action 可以包含任意异步操作. mutation是同步的,当需要异步操 ...

  3. mybatis 生成 映射文件生成工具 mybatisGenerator 使用

    第一:新建 generatorConfig.xml 文件 ,写入下面的 内容 <?xml version="1.0" encoding="UTF-8"?& ...

  4. Java Web Service 学习笔记

    一.服务端 1. 创建Java工程 2. 创建接口HostipalServiceInterface package ws_server; import javax.jws.WebMethod; imp ...

  5. Jquery获取元素高度

    第一步, 获取你要得到高度的那个div的jQuery对象, 获得方法有很多很多种, 具体你可以看一下jQuery API文档里的选择器部分, 在这里我只跟你说一个最直接的方法, 通过id获得: $(& ...

  6. java.net.SocketTimeoutException: Read timed out 错误解决

    这两天项目在测试环境下通过URLConnection 做数据传递时,出现了如下错误 java.net.SocketTimeoutException: Read timed out 经过查找研究,原因是 ...

  7. electron热更新与windows下的安装包

    帮朋友公司做了点东西,他说有很多bug,我一看,基本问题都是浏览器兼容引起的,而electron内带Chromium内核,正好一直想尝试下electron,所以研究了一波.这里只是简单的使用elect ...

  8. C/C++基础----函数

    用实参初始化形参时会忽略掉顶层const. 尽量使用常量引用,普通引用会限制所能接受的实参类型,也会给调用者误导. 管理数组实参的3种方法: 数组本身包含一个结束标记 传递指向数组首尾元素的指针 定义 ...

  9. autopy的使用探索

    autopy这个包可以直接操作电脑的一些行为,比如点击,移动鼠标啥的,但是可能只使用于windows,用处有限,不过做个简单的游戏辅助还是可以的. 网上资料贼少,很多不能用的,现总结一些可以用的放在这 ...

  10. 1003 Emergency (25 分)

    1003 Emergency (25 分) As an emergency rescue team leader of a city, you are given a special map of y ...