js 设置背景透明度不影响子元素

2024-11-04

父容器利用opacity设置透明后，子元素跟着变透明的解决方案

背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从0到1,表示透明程度.

CSS中如何设置父元素透明度不影响子元素透明度

原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果,但是有没有更简单的方法呢?使用 .例如: 设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度. 即使设置子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基础上设置的,因此子元素的opa

CSS 设置背景透明度，不影响子元素

由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素．解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 */ background: rgba(0, 0, 0, 0.6); } 2> 使用 opacity, 设置一个背景DIV,此DIV使用绝对布局 Example <div class="demo"> <div class="demo-bg"&g

使用RGBa和Filter实现不影响子元素的CSS透明背景

点击查看原文问题如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片在CSS中使用opacity有两个问题,一是为了适应所有的浏览器,我们要对付opacity讨厌的语法:二是opacity不仅使目标元素的背景变得半透明,而且使它所有的子元素的背景也变成了半透明.这意味着它里面所有的文本(译者注:图片也一样)都具有同样的透明度,我敢肯定没几个人想要这样的效果.可以通过添加一些不必要的元素,使用CSS定位技巧类似的手段

改变父元素的透明度，不影响子元素的透明度—css

1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>透明度写法</title> <style type="text/css"> *{ margin:0; padding:0; } .wrap{ margin:20

当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style> .fixed { position: fixed; left:0

当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed

问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: 根元素 (HTML), 绝对(absolute)定位或相对(relative)定位且z-index值不为"auto", 元素的opacity属性值小于1. (参考 the specification for opacity), 在mobile WebKit 和 Chrome 22+内核的

js设置div透明度

原生js设置透明度为了兼容IE与其他浏览器对透明度的设置,我们需要对以上两种样式分别进行设置: 复制代码代码如下: var alpha = 30; //透明度值变量 var oDiv = document.getElementById('div1'); //获取DOM元素对象 oDiv.style.filter = 'alpha(opacity:'+alpha+')'; //设置IE的透明度 oDiv.style.opacity = alpha / 100; //设置fierfox等透明度,注

CSS只改变背景透明度，不改变子元素透明度

一般情况下,我们可以使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即使对子元素重新定义也没有用,例如: <div style="opacity:0.4; background-image:url(...);"> <div style="opacity:1.0;"> 显示文字 </div> </div> 文字元素的透明度也会是0.4. 于是想一想,如果有方法只改变背景的透明度就

Android设置顶部banner背景透明度时影响全局背景问题

项目中用到滑动界面使顶部title栏背景渐隐渐现的效果,即初始不滑动时的透明度为0,用了bannerle.getBackground().setAlpha(0); 但使用这个方法设置透明度是管用,返回发现整个App的背景,不管是title栏还是布局背景都变成透明的了. 一finish掉这个界面出来整个世界都变了解决方法:bannerle.getBackground().mutate().setAlpha(0); .mutate()使该控件状态不定,这样控件就不会共享自己的状态,而直接使用.ge

小工具：生成半透明背景色的 CSS 代码,不影响子元素透明度

工具:http://leegorous.net/tools/bg-alpha.html 工具介绍:http://leegorous.net/blog/2010/07/29/generate-css-code-4-alpha-bg-color/

JS实现背景透明度可变，文字不透明的效果

最近项目里需要实现这么个功能,类似网游中的聊天框,背景都是透明的,但是文字是不透明.所以如果简单的使用opacity(非IE)和alpha滤镜(IE)是无法实现这个效果的,会造成全部透明. 解决办法如下: 1.实现完全透明: 设置background为transparent即可,两个浏览器通用 2.实现透明度可调节: 要求改透明度,这里IE和非IE需要分开处理非IE浏览器可通过支持CSS3的方式处理(不支持CSS3的这里忽略了),css的写法是 padding: 0px; color: rgb

父div的透明度不影响子div透明度

在设置div的透明度的时候如果设置了父div的透明度(opacity=0.8),那么子div的透明度也随着改变了,并且设置子div的透明度不起作用. 这种情况下可以使用rgba来设置父div的透明度:例如设置div黑色半透明,可以设置div的background:rgba(0,0,0,0.5).

Android 设置背景透明度

一些时候,我们须要为UI页面设置背景色,例如以下图所看到的: 上图已注: 背景颜色为#000000,透明度为40%: 那么.怎样在代码中表示呢? 首先须要了解: 颜色和不透明度 (alpha) 值以十六进制表示法表示.不论什么一种颜色的值范围都是 0 到 255(00 到 ff).对于 alpha,00 表示全然透明,ff 表示全然不透明. 表达式顺序是"aabbggrr",当中aa=alpha(00 到 ff).bb=blue(00 到 ff).gg=green(00 到 ff).r

js中的children实时获取子元素

先看下面一个小例子的结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul,li{list-style:none;} </style> </head> <body> <div id="wrap&

父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动

一般情况: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> &l

div设置overflow-scroll滚动之后，jq获取其子元素的offset.top出现问题。

先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce-leftBox"> //左边的内容 </div> <div class="ce-rightBox"> //右边的内容 </div> </div> 2.css .ce-container { background: white

给父元素与子元素分别设置visibility注意点

由于机顶盒的终端特性原因,不能用display:hidden去做隐藏,就选择了visibility:hidden. 在这里遇到一个现象: 给父元素设置了hidden,但是里面的子元素依然可见.以为只是盒子特性导致渲染出来和浏览器的不一样. 但是后来在做终端特性库的时候在浏览器上单独写了dome测试这个属性,发现父元素设置visibility:hidden,里面的子元素也不见了. 比较之前的项目的代码,找到原因了: 父元素设置hidden的同时,给子元素设置了visibility:visible.

CSSmargin击穿问题（子元素margin-top会影响父元素）

最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑.唉,有些东西不用就忘. 一.问题描述 <div class="container"> <div class="children">子元素</div> </div> .container { background-color: rgb(226, 43, 89); } .children { background-colo

解决子元素设置margin-top，效果到父元素上的问题

有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding-top来代替给子元素设置margin-top. 3.内容生成(推荐).代码如下: element(父元素):before{ content:''; display:table; }

css 只改变父元素的透明度，不改变子元素透明度rgba+opacity

给元素加透明度时,通常写法为:opacity:0.5,filter:alpha(opacity=50); 我们通常也会遇到,在给父元素背景设置透明度时,子元素内容继承了父元素的透明度. 如何让子元素脱离父元素的透明度?有如下几种方法: 1.父元素div,直接使用透明度的图片做背景. 2.父元素div(设置为相对定位),兄弟div1(设置为绝对定位)背景正常加透明度即可,兄弟div2(设置为绝对定位),层级关系高于div1即可. 3.利用CSS3属性rgba(即red+green+blue+alp

js 设置背景透明度 不影响子元素

热门专题

js 设置背景透明度不影响子元素