CSS如何只改变父元素背景透明度不改变子元素透明度

如题所述

没有办法,给父级加了透明度,那他里面的内容都是按照这个透明度显示的,再给子集单独设置opacity:1这样是在原来的透明度的基础上在执行的,也就是如果父级的是opacity:0.5,那再给子集添加opacity:1,她是在0.5透明度的基础上的不透明显示,那还属于有0.5的透明度,这个你可以添加一个单独的层,定位到某个位置,然后设定透明度,不要给父级添加透明度。
温馨提示:内容为网友见解,仅供参考
第1个回答  2018-11-13

当你是用 opacity 给一个元素设置透明度是,请注意,你修改的是这个元素的本质上的透明度。

那么在这个元素里所有的内容,包括它自己的属性(比如背景色),它内部的子元素,比如里面有个div.child 都会变的透明,而且无论你如何修改 div.child 的 opacity=1.0 都无法改变它变成了一个透明元素的事实。

原因也很简单:那就是由于我们修改的是父容器的 opacity 属性,这个属性是把元素本身都变的透明,那么存在于这个元素内部的一切都会按照 opacity 属性的值来变的透明。

所以,现在就认清了一个事实了:opacity,只要设定了,元素本质上就变的透明了。在其内部的一切都会受到这个值的影响。

解决办法,

    1. 如果是一个透明的背景色,那么没有必要大费周章的把元素的本质弄透明,你只需要在设置颜色的时候,使用 rgba 32 位带透明度的颜色即可。(父元素的 opacity 依然是1.0)。

    2. 如果是一个半透明的背景图片。那么你可以把背景图片作为一个 opacity 为 1的 父容器视图的第一个子元素。铺满整个父容器。让后设置 img 的 opacity(.5).【请 注意,此时父容器的 opacity=1.0】,然后利用绝对定位,把你需要的第二个显示内容的容器以img 为兄弟元素的关系定位在父容器里即可。(兄弟元素之间 ,opacity 是不受其影响的)

        

第2个回答  推荐于2017-06-27
可以把带有 不透明度的div 跟 嵌套img 的div 分开来,也就是 把两个效果分开,让 背景图片的div 跟 img 所在的div在相同的位置, 但设置 不同的 z-index 值,让背景图片的div在 img div 的下层。效果上可以达到你想要的,但 在你说的基础上 多一个带有背景 div 。这样 透明度就不会影响,因为 这时 img不是 带透明度div的子元素。本回答被网友采纳

CSS如何只改变父元素背景透明度不改变子元素透明度
1. 如果是一个透明的背景色,那么没有必要大费周章的把元素的本质弄透明,你只需要在设置颜色的时候,使用 rgba 32 位带透明度的颜色即可。(父元素的 opacity 依然是1.0)。2. 如果是一个半透明的背景图片。那么你可以把背景图片作为一个 opacity 为 1的 父容器视图的第一个子元素。铺满整个父...

css怎么可以只让背景透明 文字不透明
1、首先新建一个html文件,添加一个DIV,设置宽度和高度,以及背景色填充为红色。2、然后在父级DIV中插入一个子DIV,定义它的宽高,以及背景色(background:#fff;)。3、然后添加一个透明度的代码(opacity:0.6),保存后预览下效果,背景已经实现透明了,但是文字也透明了。4、熟悉PS的同学应该都知...

CSS的透明度如何设置子元素 不透明??
没有办法,子元素的透明度一定不会大于父元素的透明度,所以没有办法让父元素透明,子元素不透明,不过可以给其他不透明的元素设置position及z-index,让他位于你的透明元素之上让他看起来像是这个透明元素的子元素不透明。

父容器CSS设置了透明 opacity:0.7; 里面的子元素也跟着全部透明了.有...
外层DIV,设置透明,内容元素设置元素定位为相对定位或者绝对定位 如 text 非IE浏览器 外层div,不要设置透明,使用background:rgba(120,120,120,0.7);实现效果

CSS实现背景透明,Opacity定义了有背景的盒子透明度,但里面的文字也跟着...
line-height:300px;position:relative;z-index:1;color:#f00;} 这是要透明的文字 把要透明的层和文字剥离分开,父层relative,子层全部absolute。这样。就没问题了

css的opacity让div和里面的div透明了
子元素不透明度=父元素不透明度乘以子元素本身不透明度,而opacity的范围是0~1,所以就算把里面的div的opacity设为1也没有用,子元素是没办法获得大于父元素的不透明度值的。如果是万不得已视觉排版效果上的需要,可以分别设置两个兄弟元素的不透明度,然后用position的方法将一个放在另一个的上方。

CSS中opacity和border-radius特性
\/\/父元素的透明度opacity-father{opacity:0.4}\/\/子元素的透明度opacity-son{opacity:0.4}opacity的边界因为opacity的范围是0-1,如果我们设置的值不在这个范围之内,那么系统会按边界值去显示。.wrapper{\/\/透明值设置为-11,但是系统会解析成0opacity:-11;\/\/透明值设置为88,系统会解析成1opacity:...

css不透明度怎么设置
css不透明度的设置方法:首先创建一个HTML示例文件;然后用img标签引入图片;最后在style标签中添加css样式为“opacity: 0.5;”即可设置图片的透明度。本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑 css可以使用filter:alpha()与opacity两种方式设置不透明度,直接利用opacity设置不透明度的时候其...

css如何设置能让一个div元素覆盖在div元素上后下面的div元素中的文字不...
假设上面div的class为two,下面div的class为one。1、下面的div文字的颜色设置成transparent。.one{ color:transparent;} 2、给上面的div设置背景色。.two{ background-color: fff;}

CSS3实现模糊背景的三种效果
普通背景模糊效果通过设置背景并利用相对定位,再在父容器的伪元素中实现模糊处理。这样可以确保子元素文字不被模糊,同时解决伪元素出现白边的问题。代码示例如下:HTML结构包含简单的布局,CSS中对父容器使用背景色和相对定位,伪元素:after继承背景并设置模糊效果,绝对定位以覆盖父元素,确保子元素不受影响...

相似回答