Html 当其父容器的不透明度为 50 时,如何保持文本不透明度为 100

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6446795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:13:32  来源:igfitidea点击:

How to keep text opacity 100 when its parent container is having opacity of 50

csshtmlopacity

提问by Moksha

I have a list div which have a opacity set to 50 and inside this div I want to display some text with opacity 100,

我有一个不透明度设置为 50 的列表 div,在这个 div 中我想显示一些不透明度为 100 的文本,

Here's what I mean:

这就是我的意思:

<div id="outer">
  <div id="inner">
    Text
  </div>
</div>

The CSS would be:

CSS 将是:

#outer {
  opacity: 0.5;
}

#inner {
  opacity: 1.0;
}

I tried that, but it doesn't work.

我试过了,但它不起作用。

please help

请帮忙

Regards

问候

回答by thirtydot

A simple and compatible solution is to remove all your opacity, and use:

一个简单且兼容的解决方案是删除所有opacity, 并使用:

#outer {
    background: url(50%-transparent-white.png);
    background: rgba(255,255,255,0.5)
}
  • Browsers that support rgbawill use the second backgrounddeclaration with rgba.
  • Browsers that do notwill ignore the second backgrounddeclaration and use the .png.
  • 支持的浏览器rgba将使用background带有rgba.
  • 不这样做的浏览器将忽略第二个background声明并使用.png.

The .pngwon't work in IE6, but that's unlikelyto be a problem. If it is, it can be resolved.

.png不会工作在IE6,但是这不太可能是一个问题。如果是,则可以解决



Yet another method is detailed here:

此处详细介绍了另一种方法:

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

回答by Thomas Shields

There's two ways to do this: One is to just set the background-color of the container to a transparent color,with rgba(r,g,b,.5)- However, this is CSS3 and only supported in newer browsers.

有两种方法可以做到这一点:一种是将容器的背景颜色设置为透明颜色,使用rgba(r,g,b,.5)- 但是,这是 CSS3,仅在较新的浏览器中受支持。

The other way is to drop an absolutely positioned div inside the container, with an opacity of .5.

另一种方法是在容器内放置一个绝对定位的 div,不透明度为 0.5。

<div class="backgroundOpacity">
    My Epic Content
</div>
<br/>
<div class="backgroundDiv">
    <div id="background"> </div>
    My Other Epic Content
</div>
.backgroundOpacity {
 background-color:rgba(0,0,0,.5);
}
.backgroundDiv {
  position:relative;  
}
#background {
 position:absolute;
  top:0;
   left:0;
   width:100%;
   height:100%;
   background-color:#000;
   opacity: .5; 
}

http://jsfiddle.net/thomas4g/vVt8D/1/

http://jsfiddle.net/thomas4g/vVt8D/1/

回答by Hello World

background-color: rgba(0,0,0,0.5);

回答by i4snow

You could set your outer div like this

你可以像这样设置你的外部 div

background-color: rgba(0, 0, 0, 0.8); opacity: inherit;

background-color: rgba(0, 0, 0, 0.8); opacity: inherit;

回答by Hadi

This can be done by a trick and it's is so easy, here is how:

这可以通过一个技巧来完成,而且非常简单,方法如下:

you wanna take the text outside of the transparent div and that's by making another div sat as position: relative;

你想把文本放在透明 div 之外,那就是让另一个 div 作为 position:relative;