CSS3中的opacity透明度属性的继承问题如何解决

利用CSS3的透明属性opacity可以为我们创建对象的渐隐渐显的动画效果,但是很多情况下这种单一的渐隐渐显效果并不能满足我们的日常开发需求。有时候,我们需要在设置opacity属性的对象里面增加其子集对象,以达到符合我们的要求。但是CSS3的opacity ( 比如:opacity:0.5; )透明度属性具有继承性,当对某个对象设置了opacity透明度属性的时候,其子集元素也会有透明度效果。

使用rgba的背景色可以很直接的设置对象的透明度效果,而且对其子集元素没有继承性;而使用rgb色并设置opacity透明度属性的对象却产生了透明度继承。

一般不想要继承的情况下用rgba 的效果很好 background:rgba(0,0,0,.5) ;
时间: 2024-09-29 21:12:38

CSS3中的opacity透明度属性的继承问题如何解决的相关文章

关于opacity透明度子元素继承现象的若干研究以及hack方法

[感想]信息时代的信息是有时效性的,今天是确确实实感受到了.互联网资料虽然丰富,但是质量不一,还有大量的跟风雷同,很多人都是随手拷贝过来,根本没有实践.以前端为例,这两年浏览器的迅猛发展,造成很多原有知识的失效.但是网上还是大量充斥了以前失效的解决方案.我觉得,我们应本着实践精神,对任何问题的解决方案进行实际测试.须知:纸上得来终觉浅,绝知此事要躬行. 今天遇到一个关于透明度的问题. 大家都知道在css3中增加的新属性opacity——不透明度的设定. 使用了opacity的元素,它的不透明度会

CSS3中transform几个属性值的注意点

transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文章 CSS3 Transform. 与transition配合使用的方法参考CSS动画 animation与transition 本文记录几个注意点: 1.transform:rotate(30deg),2D旋转,正值为顺时针旋转,负值为逆时针旋转,默认旋转基点是中心点,也可以通过transform

CSS3中几个新属性的总结1

2015-12-0319:04:09 1.CSS3的支持浏览器:chrome,safari,firefox,opera,IE10之后的版本.2.在编写CSS3样式中,不同的浏览器的可能需要不用的前缀..它表示该css属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性. 前缀 浏览器-webkit chrome 和 safari-moz firefox-ms IE-o opera3.圆角的实现 1.border-radius:10px; 所有角都使用半径为10px的圆角. 2.border-

CSS3中盒子的box-sizing属性

box-sizing 属性 box-sizing 属性用来改变默认的 CSS盒模型 对元素宽高的计算方式.这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现. box-sizing:content-box(default) | border-box ; content-box 默认值,标准盒模型. width与 height 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin). 注意: 内边距, 边框 & 外边距 都在这个盒子的外部. 比如

IE浏览器部分版本不支持opacity透明度属性问题

半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); 此外这种效果不能用ietester中的ie6测试,因为ietester的ie6这样写也是不透明的,但是实际上ie6中已经显示正常了.

css3中的filter

在这周的网页中遇见了一个针对我个人而言来说以前不知道的关于css3中的一个新属性,filter.具体是我想让两个背景重叠一部分的情况下,最下层的背景在光感度下呈现出暗色.后面自己通过查询找到了这个filter,并且发现他不止一个属性,有10个.下面就来介绍下我眼中的css3的filter. filter主要是运用在图片上,以实现一些特效. 其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选: grayscale灰度 sepia褐色 saturate饱和度 h

CSS3中的media媒体查询

媒体查询多用于响应式网页中. 1.初始化设置: 在HTML文件中,网页顶部<head></head>标签中插入一句话: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 这句话在于对响应式网页做一个初始化设置,主要包括: name="viewport&quo

CSS3中的变形与动画(二)

CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻.简单点说,就是通过鼠标的单击.获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 1.在默认样式中声明元素的初始状态样式: 2.声明过渡元素最终状态

CSS3中Transform

Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一起来看看CSS3中transform的旋转rotate.扭曲skew.缩放scale和移动translate具体如何实现,老样子,我们就从transform的语法开始吧. 语法: transform : none | [ ]* 也就是: transform: rotate | scale | ske