子元素继承父元素透明度问题。

在写CSS的发现,将父元素的opacity设置为0.5之后,子元素一定会继承这个属性,且对子元素单独设置opacity,也无效。

 1             #texts{
 2                 height: 30px;
 3                 width:380px;
 4                 background: #000000;
 5                 position: absolute;
 6                 top: 270px;
 7                 color: #FFFFFF;
 8                 z-index: 997;
 9                 font-size: 12px;
10                 opacity: 0.5;
11             }
12              .textRight,.textLeft{
13                 width: 186px;
14                 padding: 0 2px;
15                 line-height: 30px;
16                 opacity: 1;
17             }
18             #texts .textRight{
19                 text-indent: 70px;
20                 float: right;
21             }
22             .textLeft{
23                 text-indent: 10px;
24                 float: left;
25             }
.textRight,.textLeft 的opacity属性完全无效。后续发现另外一种写法是有效的,将背景色转换为RGG值, background:rgb(0,0,0,0.5),最后一位表示透明度,然后再子元素设置opacity,发现有效(不考虑兼容性);代码如下
#texts{
                height: 30px;
                width:380px;
                background: rgb(0,0,0,0.5);
                position: absolute;
                top: 270px;
                color: #FFFFFF;
                z-index: 997;
                font-size: 12px;
            }
             .textRight,.textLeft{
                width: 186px;
                padding: 0 2px;
                line-height: 30px;
                opacity: 1;
            }
            #texts .textRight{
                text-indent: 70px;
                float: right;
            }
            .textLeft{
                text-indent: 10px;
                float: left;
            }
 
时间: 2024-10-31 13:12:42

子元素继承父元素透明度问题。的相关文章

Javascript禁止子元素继承父元素的事件

3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3.简单点,直接在子元素事件function最后加return false:// 阻止事件冒泡和默认操作

Windows Phone 8.1中元素适应屏幕宽度或子元素继承父元素宽度的解决方案

在Windows Phone开发过程中,对不同尺寸手机屏幕的适应是对编程的一大要求和挑战,当然这就像做网站要适应各 种各样的电脑屏幕的大小一样. 当然在WP开发这一点上,微软给了我们很多中已经封装好布局的模板和控件,归根结底,还是那几个布局控件: Grid,StackPanel,Canvas,Pivot..... 所以,分歧就来了,对于追求视觉上冲击和美观的程序员来说,虽说要秉承微软的大块布局,内容为先的策略,但是 依旧不喜欢微软的那些既定的模板,所以解决方案就有两个. 一:创建项目时依旧用那些

阻止子元素继承父元素事件

转载的,作者不详.此方法实际上是阻止子元素事件冒泡,达到类似效果. 想要阻止点击#p_cont区域时触发a事件,需要在#p_cont区域内加入阻止事件冒泡的代码,具体实现祥看本文 <div id="p_box" onclick="a()"> <div id=p_cont> </div> </div> #p_box包括#p_cont,当点击#p_box区域任何位置时(包括#p_cont),都会触发a事件.想要阻止点击#p

I do not want to inherit the child opacity from the parent in CSS(不想让子元素继承父元素的透明度)

Instead of using opacity, set a background-color with rgba, where 'a' is the level of transparency. So instead of: background-color: rgb(0,0,255); opacity: 0.5; use background-color: rgba(0,0,255,0.5);

阻止子元素继承父元素事件(郁闷我一晚上的问题!)

想要阻止点击#p_cont区域时触发a事件,需要在#p_cont区域内加入阻止事件冒泡的代码,具体实现祥看本文,希望对你有所帮助. #p_box包括#p_cont,当点击#p_box区域任何位置时(包括#p_cont),都会触发a事件.想要阻止点击#p_cont区域时触发a事件,需要在#p_cont区域内加入阻止事件冒泡的代码. <div id="p_box" onclick="a()" style='width:100;height:100px;backgr

js在父元素上添加点击事件,怎么阻止子元素继承父元素的点击事件?

div.onclick = function(ev){ if(ev.target!=this) return; else { ... } }

清除子元素继承父元素鼠标移入移出事件

function contains(parentNode, childNode) { if (parentNode.contains) { return parentNode != childNode && parentNode.contains(childNode); } else { return !!(parentNode.compareDocumentPosition(childNode) & 16); } } function checkHover(e,target){

判断一个元素是否是另一个元素的子元素或者父元素

判断一个元素是否是另一个元素的子元素或者父元素:在实际应用中有时候会判断某个元素是另一个元素的子元素或者父元素,下面就通过代码实例介绍一下. //判断:当前元素是否是被筛选元素的子元素 jQuery.fn.isChildOf=function(b){ return (this.parents(b).length>0); }; //判断:当前元素是否是被筛选元素的子元素或者本身 jQuery.fn.isChildAndSelfOf=function(b){ return (this.closest

jQuery中兄弟元素、子元素和父元素的获取

我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行获取和操作. jQuery提供的方法 上来就把jQuery提供的方法摆在这里是不是有点不好呀,不过,我们从jQuery的方法名称上就能知道这些方法是干嘛的了. parent(selector) 查找父元素,可传入selector进行过滤(下同) parents(selector) 查找所有的祖先节点