CSS中不透明度继承问题的处理
关于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中不透明度继承问题的处理的更多相关文章
- css中的继承、层叠、样式优先级机制
一.继承与层叠:
- CSS中line-height继承问题
在CSS中,line-height属性用于设置多行元素的空间量,比如文本.对于块级元素,它指定元素行盒的最小高度.对于非替代的inline元素,它用于计算行盒的高度. 语法 /* Keyword va ...
- css 中可以继承的属性
CSS中可以和不可以继承的属性一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到 ...
- css中可以继承的属性
声明 : 本文源于https://www.cnblogs.com/thislbq/p/5882105.html CSS中可以和不可以继承的属性 一.无继承性的属性 1.display:规定元素应该 ...
- CSS中文本继承情况
无继承性的属性 http://www.cnblogs.com/thislbq/p/5882105.html vertical-align: 垂直文本对齐 CSS中文本可以继承父级样式 体 ...
- 举例详解CSS中的继承
CSS的继承是由所使用的样式属性定义的.换句话说,当你查看CSS属性backgruound-color,你会看到一栏「继承性」,也许你几乎没有在意过它,但是它还是十分有用的.什么是CSS继承 每一个元 ...
- CSS中的继承
继承:子元素继承父元素的样式,但是并不是所有属性都是默认继承的. 通过文档中的 inherited:yes 来判断属性是否可以继承,关于继承可以参见css的继承关键字: 一.无继承性的属性 1.dis ...
- 关于css中透明度继承的问题
今天工作中发现了一个问题,透明度的继承问题,如下图所示: 容器div2就“继承了”外面容器div1的透明度,也变成了70%的透明.容器里面的字体颜色和图片都“继承”了div1,具体代码如下: 可是设计 ...
- CSS中可以继承和不可继承的常见属性
一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...
随机推荐
- Oracle 存储过程发送邮件
CREATE OR REPLACE PROCEDURE PROCSENDEMAIL(P_TXT VARCHAR2, ...
- java 报错及解决
java文件编译报错:error: unmappable character for encoding ASCII 解决: 编译时:javac -encoding utf-8 TestJava.jav ...
- netty异步
通俗理解:http://lingnanlu.github.io/2016/08/16/netty-asyc-callback 异步的小demo:https://blog.csdn.net/coder_ ...
- base64编码的原理及实现
base64编码的原理及实现 我们的图片大部分都是可以转换成base64编码的data:image. 这个在将canvas保存为img的时候尤其有用.虽然除ie外,大部分现代浏览器都已经支持原生的基于 ...
- opencv读取并播放avi视屏
视屏的本质是一些静态的图像的集合,opencv可以不断读取视屏中的图片,显示,就产生了类似电影的效果. 这样也就可以通过opencv对实时的视屏流进行处理了. #include "stdaf ...
- Jquery获取元素高度
第一步, 获取你要得到高度的那个div的jQuery对象, 获得方法有很多很多种, 具体你可以看一下jQuery API文档里的选择器部分, 在这里我只跟你说一个最直接的方法, 通过id获得: $(& ...
- RedHat Enterprise Linux7.0安装Oracle12c
1. 验证 1.1 硬盘空间要求 1.1.1 安装盘 类型 占用磁盘空间 Enterprise Edition 6.4GB Standard Edition 6.1GB Standard Editio ...
- linux 信号处理 六(全)
一.信号及信号来源 信号本质 信号是在软件层次上对中断机制的一种模拟,在原理上,一个进程收到一个信号与处理器收到一个中断请求可以说是一样的.信号是异步的,一个进程不必通过任何操作来等待信号的到达,事实 ...
- 峰Spring4学习(3)注入参数的几种类型
People.java model类: package com.cy.entity; import java.util.ArrayList; import java.util.HashMap; im ...
- Java-Runoob-高级教程-实例-数组:07. Java 实例 – 数组合并
ylbtech-Java-Runoob-高级教程-实例-数组:07. Java 实例 – 数组合并 1.返回顶部 1. Java 实例 - 数组合并 Java 实例 以下实例演示了如何通过 List ...