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

Question

我想用html和css实现这个目的：

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

jsFiddle of my try here

我试图获得的效果是一个弹出框，它出现在页面顶部。它通过淡化下面的内容（通过降低不透明度）突出显示。

Answer 1

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

#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

Answer 2

据我所知，你不能以一种简单的方式做到这一点。这里有几个选项：

1. 使用绝对定位将容器“放在”容器内。

   #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>

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

Answer 3

尝试将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

Answer 4

应用此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 Web浏览器声明background：transparent。

有关详细信息，请访问以下链接：

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

Answer 5

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

我个人喜欢黑色覆盖层，不透明度约为65％，但是对于你想要做的事情，你可能想要在70％的圆形处使用白色覆盖层。

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

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

从技术上讲，你不是想要做什么，但从美学角度来说，它可以产生非常相似的效果，并且UX明智地完成同样的事情。它也很容易做到，而且几乎所有东西都得到广泛支持。

Answer 6

不透明度将始终由子元素继承，无论其中的元素是什么，到今天为止都没有解决方法建议，当子元素在透明背景之外移动时，就像弹出菜单/对话框中那样框创建，将背景与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;
}

Answer 7

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

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

Answer 8

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

使用平铺图像可能看起来过时，但不会担心所有浏览器。

Answer 9

使用background-color: rgba(#777788, 0.3);代替不透明度可能可以解决问题。

Answer 10

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

在容器上不要使用背景。

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

Answer 11

使用可以在：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
}

Answer 12

在不影响子元素的情况下，您不能应用不透明度属性！

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

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

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

但是，如果将它们放置在div父元素中并使用CSS position属性，则可以实现所需的效果：

.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>