如何在不影响带有 html/css 的子元素的情况下应用不透明度？

Posted 2023-02-21

【中文标题】如何在不影响带有 html/css 的子元素的情况下应用不透明度？

【英文标题】：How to apply an opacity without affecting a child element with html/css?

【发布时间】：2012-04-18 18:17:28

【问题描述】：

我想用 html 和 css 来实现：

我尝试将容器的不透明度设置为 0.3，将框设置为 1，但它不起作用：两个 div 的不透明度均为 0.3。

jsFiddle of my try here

我想要达到的效果是出现在页面顶部的弹出框。它通过淡化下面的内容（通过降低不透明度）来突出显示。

【问题讨论】：

CSS - Opaque text on low opacity div?的可能重复

@FélixGagnon-Grenier 我认为这个解决方案不会使 OP 受益，因为他可能也想淡化内容。

【参考方案1】：

你不能在不影响子元素的情况下应用 opacity 属性！

“不透明度适用于整个元素，包括其内容，即使该值不被子元素继承。因此，元素及其子元素相对于元素的不透明度都具有相同的不透明度背景，即使它们彼此之间具有不同的不透明度... 如果您不想对子元素应用不透明度，请改用背景属性。" @ 987654321@

如果您希望不透明度仅应用于背景，而不影响子元素，请使用：

background-color: rgba(255, 255, 255, .3)

但是，如果将它们放置在 div 父元素中并使用 CSS 位置属性，则可以达到预期的效果：

.parent 
  border: solid green 3px;
  position: relative;
  width: 400px;
  height: 200px;


.sibling-one 
  border: solid red 3px;
  position: absolute;
  box-sizing: border-box;
  width: 400px;
  height: 200px;
  opacity: .3;
 

.sibling-two 
    border: solid blue 1px;
    margin: 10px;
    width: 200px;
    height: 100px;
    position: absolute;
    transform: translateY(50%);
  

<div class="parent">
  <div class="sibling-one">
  <p>A sibling's one element</p>
</div>
<div class="sibling-two">
    <p>A sibling's two element</p>
</div>
</div>

【参考方案2】：

使用可以添加 :before 或 :after 的元素。我的解决方案

<div class="container">
    <div>
         Inside of container element is not effected by opacity. 
    </div>
</div>

CSS。

.container
    position: relative;


.container::before
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #000000;
    opacity: .25

【参考方案3】：

不透明度将始终由子元素继承，无论其中的元素是什么，到目前为止还没有建议的解决方法，当子元素移动到透明背景之外不是弹出菜单/对话框中的选项时框创建，使用 rgba 的背景是解决方案。

这是我创建的一个输入框，我可以使用 javascript 不可见的类属性打开或关闭它

<div id="blackout" class="invisible">
    <div id="middlebox">
        <p>Enter the field name: </p>
        <input type="text" id="fieldvalue" />
        <input type="button" value="OK" id="addfname" />
    </div>
</div> 

CSS

#blackout 
    z-index: 9999;
    background: rgba(200, 200, 200, 0.6); 
    height: 100%;
    width: 100%;
    display: block;
    padding: 0px;
    clear: both;
    float: left;
    position: absolute;
    margin-top: -10px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: -10px;


#blackout #middlebox 
    border: thick solid #333;
    margin: 0px;
    height: 150px;
    width: 300px;
    background-color: #FFF;
    top: 50%;
    left: 50%;
    position: absolute;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 10px 50px 0px 50px;



#middlebox p 
    float: left;
    width:100%;
    clear:both;


#middlebox input 
    clear:both;
    margin-bottom:10px;


#middlebox input[type=text]
    width:100%;


#middlebox input[type=button]
    float:right;
    width:30%;


.invisible
    visibility:hidden !important;

【参考方案4】：

您可以添加一个绝对位于容器后面的容器同级，大小相同，并对其应用不透明度。

并且在您的容器上不使用背景。

现在容器的子级没有不透明的父级，问题就消失了。

【参考方案5】：

据我所知，您无法以简单的方式做到这一点。这里有几个选项：

使用绝对定位将框定位在容器“内部”。

#container 
    opacity: 0.3;
    background-color: #777788;
    position: absolute;
    top: 100px;
    left: 100px;
    height: 150px;
    width: 300px;

#box 
    opacity: 1;
    background-color: #ffffff;
    position: absolute;
    top: 110px;
    left: 110px;
    height: 130px;
    width: 270px;

<div id="container"></div>
<div id="box">
    <p>Something in here</p>
</div>

使用 Javascript - 与上面几乎相同，但位置和大小不必硬编码。

【讨论】：

仅供参考，我认为编号有点不对。

这不是解决方案，因为盒子不再是容器的子容器。

另一种选择可能是使用 jQuery UI 对话框 (jqueryui.com/demos/dialog)

Ilia，您是否有任何链接可以提示您为此使用 javascript？我有 50% 不透明的父 包含我想要 100% 不透明的子图像。将 设置为 position:relative; 并将 img 设置为 position:absolute; 不允许我覆盖 img 上继承的不透明度，并且我不能对 本身使用绝对定位（那是一团糟； -)。在 Javascript 中，我尝试了 imgs[i].style.opacity = '1';，但这也无法覆盖继承的不透明度。如果我理解正确，我也不能使用 rgba，因为我需要影响 img，而不仅仅是颜色。

@NishantPatel 我已经为这个问题提供了一个可能的解决方案。由问题的原始作者决定是接受还是拒绝它。另外，那是8年前的事了！自八年前以来，网络发生了很大变化:-)

【参考方案6】：

您可以将不透明度与背景颜色结合使用，如下所示：

#container 
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);


#box 
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);

<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>

​Live demo

【讨论】：

这个答案真的很好。但是，您能否提供一些有关浏览器与此方法的兼容性的详细信息？

@Sparky 给你caniuse.com/#search=rgba ~ 在撰写本文时，浏览器支持率为 85.51%。

这不是真正的答案。它并没有真正改变不透明度，它改变了背景颜色。

ie8 不存在 rgba()

不错的解决方法，但前提是您想为颜色由您在 CSS 中定义的事物添加不透明度。如果是这种情况，您需要为多种不同颜色添加不透明度custom CSS properties can make it easier。

【参考方案7】：

使用 background-color: rgba(#777788, 0.3); 代替 opacity 或许可以解决问题。

【讨论】：

rgba 没有这个sintax，而是rgba(255,0,0,0.3);

@DaFois 是正确的，但答案确实解决了我的问题。

【参考方案8】：

另一种解决方法是简单地使用叠加背景来创建类似的效果。

我个人喜欢不透明度约为 65% 的黑色叠加层，但您可能希望使用大约 70% 的白色叠加层。

在 Photoshop 或 GIMP 中创建一个小的（100 x 100 或更小）PNG，它具有您想要的颜色和不透明度。然后将其设置为灯箱的背景。

如果您以不同的不透明度创建多个 PNG，您可以使用 JS 轻松在它们之间切换或通过后端脚本在加载时动态切换。

从技术上讲，这不是您想要做的事情，但从美学上讲，它可以产生非常相似的效果，而 UX 明智的做法是完成同样的事情。它也很容易做到，并且在几乎所有方面都得到广泛支持。

【参考方案9】：

尝试使用 rgba 作为图像的“预内容”叠加层，这是一种保持响应速度且不会影响其他元素的好方法。

header #inner_header_post_thumb 
  background-position: center;
  background-size: cover;
  position: relative;
  background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
  border-bottom: 4px solid #222;


header #inner_header_post_thumb .dark_overlay 
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);


header #inner_header_post_thumb .dark_overlay .container .header-txt 
  padding-top: 220px;
  padding-bottom: 220px;
  color: #ffffff;
  text-align:center;


header #inner_header_post_thumb .dark_overlay .container .header-txt h1 
  font-size: 40px;
  color: #ffffff;


header #inner_header_post_thumb .dark_overlay .container .header-txt h3 
  font-size: 24px;
  color: #ffffff;
  font-weight: 300;


header #inner_header_post_thumb .dark_overlay .container .header-txt p 
  font-size: 18px;
  font-weight: 300;


header #inner_header_post_thumb .dark_overlay .container .header-txt p strong 
  font-weight: 700;

<header>
  <div id="inner_header_post_thumb">
    <div class="dark_overlay">
      <div class="container">
        <div class="row header-txt">
          <div class="col-xs-12 col-sm-12">
            <h1>Title On Dark A Underlay</h1>
            <h3>Have a dark background image overlay without affecting other elements</h3>
            <p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>

          </div>
        </div>
      </div>
    </div>
  </div>
</header>

See a working codepen here

【讨论】：

这个答案更好，因为它保留了级联

IE11也兼容！

【参考方案10】：

这可能不是最正统的方法，但您可以为每个重复的 div / 容器使用一个小的半透明背景图像。似乎在这个时代，您应该能够在没有 js 的纯（简单而不是 hackish）css 中实现这一点，但正如上面的答案所示，这并不是那么简单......

使用平铺图像可能看起来过时，但在所有浏览器中都可以使用。

【参考方案11】：

应用这个 css 规则

.alpha60  

/* Fallback for web browsers that doesn't support RGBa */ 

background: rgb(0, 0, 0); 

/* RGBa with 0.6 opacity */ 

background: rgba(0, 0, 0, 0.6); 

/* For IE 5.5 - 7*/ 

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,      endColorstr=#99000000); 

/* For IE 8*/ 

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,     endColorstr=#99000000)"; 

除此之外，您还必须声明背景：对于 IE 网络浏览器透明。

更多详情请访问以下链接：

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

【讨论】：

@Bojangles，请再次阅读 OP...OP only 需要透明背景，这个答案虽然有点草率，但提供了一个很好的解决方法的链接.

【参考方案12】：

设置了不透明度的元素的任何子元素都将采用该不透明度。

要实现这种风格，您可以为背景使用 IE 的 rgba 颜色和过滤器，并在文本元素上使用不透明度。只要第二个框不是其中一个文本元素的子元素，它就不会继承不透明度。