CSS实现父元素半透明,子元素不透明
CSS实现父元素半透明,子元素不透明。 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明。但是这样实现的半透明有个问题,那就是这个属性会被子元素所继承。
如下代码,则子元素中也将是半透明效果,无论你将子元素的半透明值重置还是如何都不会改变这一情况。
.parent{opacity:0.5; background-color:#fff;}
.child{opacity:1.0; background-color:#fff; height:200px;}
HTML:
<div class="parent">
<div class="child">哈哈哈</div>
</div>
其实在新的CSS3规则里面的属性 GRBA已经可以方便的实现父元素透明,而子元素不透明了。 如下代码
<div class="parent" style="background:rgba(255,255,255,0.5)">
<div class="child" style="height:200px; background-color:red">哈哈哈</div>
</div>
但是对于IE6~8方面就无法兼容了,可以适当的降级。 如果一定要兼容的话只能考虑使用绝对定位的,看上去是包含关系的两个层,其实是兄弟关系,使用JS来控制其位置的呈现,这种具体就不再陈述了,网上解决方案很多。
CSS实现父元素半透明,子元素不透明的更多相关文章
- html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果
模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...
- css设置时父元素随子元素margin值移动
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...
- 父元素与子元素之间的margin-top问题(css hack)
hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. hytml代码: &l ...
- 关于css中父元素与子元素之间margin-top的问题
之前在使用经常遇到下面的问题: html: <div class="top"> <div class="one">I'm the fir ...
- 父元素与子元素之间的margin-top问题(css hack)(转载)
情况: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 解决方法: 1.修改父元素 ...
- CSS 实现:父元素包含子元素,子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...
- 父元素与子元素之间的margin-top问题
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...
- HTML 父元素与子元素之间的margin-top问题
问题: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. 代码如下: <div ...
随机推荐
- 【充分利用你的Azure】将Azure用作云计算平台(1)
本文将围绕几个步骤来讲. 因为本人是MSP,微软送了150刀的额度给我随便使用.这篇文章是要讲将Azure用作云计算平台,对于我来说,我是做机器学习的,那么Azure就要有机器学习的平台. 本文的目的 ...
- S2_SQL_第一章
第一章:数据库的设计 1.1:为什么需要规范数据库的设计 1.1.1:什么是数据库设计 数据库设计就是将数据中的数据实体及这些数据实体之间的关系,进行规范和结构的过程. 1.1.2:数据库设计非常重要 ...
- Java比较器
导语 本节内容,比较器Comparable是核心内容. 主要内容 重新认识Arrays类 两种比较器的使用 具体内容 Arrays类 在之前一直使用的"java.util.Arrays.so ...
- Jmeter的安装和启动时出现unable to access jarfile apachejmeter.jar error value=1错误处理
Jmeter是纯Java开发的, 能够运行Java程序的系统一般都可以运行Jmeter, 如:Windows. Linux. mac等. 由于是由Java开发,所以自然需要jdk环境. Windows ...
- 【学习】js学习笔记:数组(二)
二维数组 例子:矩形反转: <script> var arr=[[1,1,1,1,1],[2,2,2,2,2],[3,3,3,3,3],[4,4,4,4,4],[5,5,5,5,5]]; ...
- python3.6安装pyspider
win10下安装pyspider 1.pip 我在安装pip的时候默认安装了Pip. 如果没有的话:pip安装 2.PhantomJS PhantomJS 是一个基于 WebKit 的服务器端 Jav ...
- MySQL索引语法+使用场景
MySQL索引语法 建表时添加索引 建表同时建立单索引 CREATE TABLE t_user1(id INT , userName VARCHAR(20), PASSWORD VARCHAR(20) ...
- Linux计划任务-at命令
第一部分:at命令 1. at命令:在一个指定的时间执行一个指定任务,只能执行一次,且需要开启atd进程(ps -ef | grep atd查看, 开启用/etc/init.d/atd start ...
- jsp中的盲区-面试可能会问到的东西
1.今天看到一个有趣的JSP题目. <body> This is my JSP page. <br> <% int a = 10; %&g ...
- 25.Linux-Nor Flash驱动(详解)
1.nor硬件介绍: 从原理图中我们能看到NOR FLASH有地址线,有数据线,它和我们的SDRAM接口相似,能直接读取数据,但是不能像SDRAM直接写入数据,需要有命令才行 1.1其中我们2440的 ...